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MACROMEDIA DREAMWEAVER TUTORIAL 


Membuka Dreamweaver MX 

Untuk memulai bekerja dengan Dreamweaver MX, anda harus memulai 
dengan membuka program tersebut. Kebanyakan sekarang program ini lebih 
banyak digunakan dalam membuat web. Anda bisa membuka dengan mengklik 
tombol "Start" pada sudut kiri layar anda, lalu ke "Programs,” lalu ke 
“Macromedia” folder. Lalu pilih “Macromedia Dreamweaver MX.” 


Seperti terlihat pada layar monitor ini 


Ketika anda membuka program, anda akan ditanyakan untuk memilih 
antara bekerja dalam Dreamweaver MX workspace atau Dreamweaver 4 
workspace. 


Workspace Setup 


Please choose the workspace layout you're most comfortable with. You can switch 
layouts later in Preferences. 
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C Dreamweaver MX Workspace @ Dreamweaver 4 Workspace 


IS Homesite/CaderStile 


Untuk ini gunakan pilihan “Dreamweaver MX Workspace” dan klik “OK” 
untuk memprosesnya. Tapi jika anda lebih nyaman menggunakan 
Dreamweaver 4 workspace, pilih option ini dan lanjutkan 


Tampilan Dreamweaver MX (Different Views) 

Dreamweaver MX adalah program yang sangat fleksibel, program ini 
mengijinkan anda untuk melihat kode dalam tampilan yang berbeda : Code 
View, Code dan Design View, dan Design View. Anda bisa berpindah antara 
tampilan ini dengan menggunakan tiga tombol icon yang terdapat diatas 
sebelah kiri monitor. 


lola 


Dalam Code view, Dreamweaver MX Menampilkan halaman web dalam bentuk 
format baris : HTML code. Jika anda sudah akrab dengan HTML, anda bisa 
mengedit halaman web ini dari yang ditampilkan. 


The Code dan Design View membagi layar dalam setengah tampilan, tampilan 
code HTML untuk halaman web dibagian atas, dan setengahnya lagi tampilan 
Design View yang bisa kita edit. 
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Program Layout 


Satu dari perbedaan utama antara Dreamweaver MX dan versi sebelumya 
adalah tampilan interface, termasuk didalamnya adalah beberapa panel dan tabs. 
Ketika anda pertama kali membuka Dreamweaver MX, anda akan disambut dengan 
beberapa panel, yang berada di sebelah kanan layar, dan diatas layar. 
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Jika anda tidak nyaman dengan tampillan dari Dreamweaver MX anda bisa 
mengubahnya ke versi Dreamweaver 4. 


Mengubah Workspace 

Ke menu bar dan pilih “Edit” lalu “Preferences.” Ketika jendela 
“Preferences” terbuka, pastikan anda berada di “General” tab. Lalu, klik tombol 
“Change Workspace,” yang berada pada tengah-tengah jendela. 
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Preferences x 


General 


Document Options: [~ Show Only Site Window on Startup 


Code Format MM Open Files in New Window 

Code Hints - 5 

Code Rewriting Ik Wam when Opening Read-Only Files 

CSS Styles i ing Fil 

Fie Types / Editors Update Links when Moving Files: | Prompt 7] 
Fonts 

Highkahting Change Workspace... 

Invisible Elements 


Layout View Editing Options: IM Show Dialog when Inserting Objects 
Hew Doone I7 Faster Table Editing (Deferred Update) 
Preview in Browser MM Enable Double-Byte Inline Input 

Kuick Teg Edtor IZ Switch to Plain Paragraph After Heading 
Status Bar I Allow Multiple Consecutive Spaces 
Validator 


MM Use <strong> and <em> in place of <b> and <i> 
Maximum Number of History Steps: [50 
Insert Panel: ficonsOny x 
Spelling Dictionary: [English (American) z] 


Cancel | Help | 


Ini akan membawa ke jendela “Workspace Setup” window. Jika anda 
ingin menggunakan tampilan Dreamweaver 4 layout, pilih “Dreamweaver 4 
Workspace” dan Klik “OK” untuk melanjutkan. 


Workspace Setup a 


Please choose the workspace layout you're most comfortable with, You can switch 
layouts later in Preferences. 
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Jika anda memilih untuk menggunakan Dreamweaver 4 Workspace, dan anda 
tidak ingin membaca dan melihat tampilan lain pada bagian ini. 
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Panels 

Sebagai dasar mendesain web, banyak dari panel ini tidak dibutuhkan. 
panel ini bisa ditutup, ini akan membuat layar utama Dreamweaver lebih luas. 
Disini diterangkan cara cepat menuju panel dalam Dreamweaver MX: 


Design 
Kontrol panel CSS (Cascading Style Sheet) Styles, HTML Style Tags, 
dan sifat halaman web, dan menu. 


< w Design 

CSS Styles 
(© Apply Styles C Edit Styles 

Æ No CSS Style 


Application 

Panel ini sangat eksklusif untuk mengatur fungsi database 
yang ditempatkan dalam halaman web. Karena ini merupakan 
tutorial dasar, kita tidak akan berpindah ke daerah yang lebih jauh 
mengenai database dalam Dreamweaver MX. 
- w Application z 


Databases | Bindings | Server Beh{ Component 
j | Document Type: HTML 


To use dynamic data on this page: 
w 1, Create a site for this file, 
2, Choose a document type. 


3, Set up the site's testing 
server, 


Code 


Panel ini mengijinkan anda untuk menyetel kode. Untuk 
contoh, code mendeteksi kesalahan, dan acuan anda untuk belajar 
bahasa code bisa digunakan dalam Dreamweaver MX. 
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Tag Inspector | Snippets 


<HTML> 
(=|. <HEAD> 
[=| < TITLE> 
<I TITLE> 


Mo tag selected 


Answers 

Jika anda bingung atau kesulitan dalam menggunakan 
Dreamweaver MX, atau ingin mengetahui bagaimana sesuatu 
bekerja, panel jawaban akan disediakan dengan informasi 
yang anda butuhkan. 


Learning Macromedia 
Dreamweaver MX 


What's New i- 
Readme Tg 
Tutorials > 


Update Panel 
Click Update to connect to 
macromedia.com and get the latest 


Update 


Files 

Dari semua panel yang ada dalam Dreamweaver MX, panel files 
adalah yang paling penting dan banyak digunakan. Pada jendela ini anda 
bisa mengatur hubungan files ke situs anda atau halaman web, dan 
merupakan mekanisme utama untuk uploading dan downloading files ke 
web. Files panel dimana semua file web anda akan dimunculkan. 
Karena ini adalah fungsi utama dari Dreamweaver MX, kita akan 
mendiskusikan “the Files”. 
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Jendela dalam bagian “Publishing”. 


File Edit, View. Site. 


PAGAR A Blo 
[Unnamed Site 1 “| Local View “| 


fm Site - Unnamed Site 1 (C:\Docume 
Desktop 


Managing Panels 
Ada beberapa cara dalam mengatur panel dalam Dreamweaver MX. 
Lihat diagram dibawah untuk mempelajarinya. 


> esign 

> Code 

> Application 
> Files 
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Area kecil dengan titik kecil menandakan anda bisa menggunakan mouse untuk 
mengklik dan mendrag panel ke bagian berbeda dari layar. Ini akan berguna 
ketika menghilangkan group dalam panel. 


Dengan mengklik pada segitiga kecil, anda bisa memperluas panel untuk 
melihat semua tab dan menu yang berbeda. Mudah saja klik dalam segitiga 
sekali lagi untuk memperkecil ukuran tabs. 


Panjang ini, tombol khusus dengan segitiga didalam mengijinkan anda untuk 
menyembunyikan panel dengan sepenuhnya. Ini akan memperluas layar panel 
utama layar Dreamweaver MX. Klik tombol ini lagi untuk melihat panel. 


Jalan lain, anda bisa klik kanan pada salah satu panel dan pilih “Close Panel 
Group” untuk menutup panel secara keseluruhan. Untuk membuka panel yang 
telah ditutup, anda bisa pergi ke menu bar dan memilih panel yang diinginkan dari 
“Window.” juga, anda bisa memilih “Hide Panels” dari “Window” menu (shortcut 
“F4”) jika anda ingin menutup semua panel secara cepat. 


Window Help 

v Insert Ctrl-F2 

¥ Properties Ctrl+F3 
Answers Alt+F1 
CSS Styles Shift +F 11 
HTML Styles Ctrl+Fii 
Behaviors Shift--F3 


Tag Inspector F3 


Snippets Shift-+F9 
Reference Shift--F1 
Databases Ctrl+Shift-+F10 
Bindings Ctrl+Fid 

Server Behaviors Ctri+F9 
Components Ctrl+F7 

Site Fe 

Assets Fil 

Results b 
Others b 


Srrange Panels 
Hide Panels 


Cascade 
Tile Horizontally 
Tile Vertically 


Untitled-1 


Direkomendasikan anda untuk mensetting Dreamweaver MX workspace sesuai 
dengan kebutuhan dan keinginan anda 
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The Insert Bar 

Insert bar, terletak diseberang atas layar, berbeda dari panel diatas. 
Insert bar berisi lebih tabs dari pada panel lain, dan memiliki beberapa pilihan 
untuk memasukkan dan manipulasi objek dan fungsi ke halaman web. Anda 
akan menemukan banyak cara anda untuk membiasakan diri dengan option 
ini, mereka mengijinkan untuk mempercepat dan cara mudah untuk 
memasukkan objek dalam halaman. 


Common 
Fitur tab umum yang banyak digunakan dalam Dreamweaver 
MX 
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1. Hyperlink: Klik diatas dan akan membuat anda untuk link ke lokasi 
lain dari halaman web, file atau lokasi pada halaman yang sama. 

2. Email Link: Email link mengijinkan pengunjung situs 
mengirimkan seseorang email dengan mengklik pada special 
link. Gunakan tool ini untuk mempermudah link. 

3. Named Anchor: Tanda anchor ini adalah istimewa dalam 
melakukan link, akan membawa user ke bagian lain pada 
halaman yang sama. Klik nama tombol nama anchor untuk 
mempercepat membuat link untuk anchor. 

4. Insert Table: Ketika anda mengklik tool ini, akan muncul 
jendela menanyakan jika anda ingin memasukkan informasi dan 
membuat tabel. Ketika itu selesai, klik pada “OK” dan akan 
muncul tabel dalam halaman web. 

5. Draw Layer: Layer bisa membantu ketika mendesain layout untuk 
halaman. Layer bukanlah tabel, tapi merupakan kotak yang bisa 
diisi teks, gambar, atau apa saja, dan bisa ditempatkan dimana saja 
dilayar. Ketika anda mengklik tombol ini, kursor anda akan berubah 
menjadi salib, dan anda bisa menarik layer pada halaman. 

6. Image: Anda bisa dengan mudah menempatkan gambar dalam 
halaman web dengan mengklik tombol ini. Ketika anda 
melakukannya, jendela baru akan muncul. Dari sini, anda bisa 
membrowser komputer anda untuk mencari gambar yang ingin 
dimasukkan ke dalam halaman web. Ingat, jika anda berencana 
untuk menempatkan halaman anda dalam internet, anda harus 
menaruh semua gambar yang digunakan dalam web dengan baik. 
Ini akan diceritakan pada bagian “publishing” 

7. Image Placeholder: Penempatan gambar bisa digunakan secara 
efektif dalam web desain. Mereka akan terlihat sederhana, tapi 
mereka sangat penting. “image”. Ini merupakan pixel kosong yang 
bisa digunakan untuk berbagai hal, seperti membuat ruang antar 
objek, atau membuat garis dan kotak untuk layouts. 

8. Fireworks HTML: Jika anda membuat halaman web memakai 
Macromedia Fireworks, anda akan bisa memasukkannya ke dalam 
halaman Dreamweaver MX dengan menggunakan tool ini. 

9. Flash: Mengijinkan anda untuk memasukkan elemen flash dalam 
halaman web. 

10. Rollover image: Suatu efek khusus pada gambar, ketika kursor 
mouse digerakkan pada gambar maka gambar akan berubah. 


11.Navigation Bar: Ini merupakan fungsi yang komplek dan akan 
membuat anda untuk mengendalikan bar situs anda, dan mengubah 
gambar untuk link ke halaman lain. 

12.Horizontal Rule: suatu garis sederhana yang bisa digunakan 
untuk beberapa bagian isi halaman web. Klik tombol ini, 
memutuskan panjang garis horizontal, dan ini akan dimasukkan ke 
halaman. 

13.Date: Klik tombol ini untuk memasukkan tanggal ke halaman web, 

14.Tabular Data: Memasukkan data ke dalam tabular 

15.Comments: Komentar bisa digunakan dalam halaman web, tanpa 
benar-benar muncul pada halaman web. Ini akan membantu jika 
anda ingin mengingat sesuatu yang anda desain. 

16.Tag Chooser: Memasukkan spesifik HTML tag dari daftar. 
Biasanya digunakan oleh Web Developer yang sudah mahir. 


Layout 


Fungsi dalam layout tab membantu untuk membuat layout desain 
untuk halaman. 


| Common Layout | Text Tables | Frames | Forms | Templates | Characters | Media | Head | Script | Application 


EE Pi | [Standard View Layout View 
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1. Insert Table: Ketika anda mengklik tool ini, jendela akan 
muncul menanyakan anda untuk memasukkan informasi untuk 
membuat tabel. Ketika anda selesai, klik pada “OK” dan tabel 
akan muncul dalam halaman web anda. 

2. Draw Layer: Layer yang bisa membantu ketika mendesain layout 
untuk halaman. Layer bukanlah tabel, tapi merupakan kotak yang 
bisa diisi teks, gambar, atau apa saja, dan bisa ditempatkan dimana 
saja dilayar. Ketika anda mengklik tombol ini, kursor anda akan 
berubah menjadi salib, dan anda bisa menarik layer pada halaman 


Text 


Fungsi dibawah ini membantu untuk mengedit dan memformat teks 
dalam halaman web. 
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1. Font Tag Editor: Ketika anda memiliki font spesial yang anda buat 
untuk digunakan atau dalam Cascading Style Sheet, anda bisa 
mengedit tag dengan mengklik icon ini. 

Bold: Menebalkan teks yang anda pilih 

Italics: Memiringkan teks yang anda pilih. 

Strong: Seperti Bold hanya digunakan dalam HTML yang berbeda. 


< w Insert 


ul ol 
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5. Emphasis: Sama seperti “Italic,” hanya “Emphasis” digunakan 
untuk HTML tag yang berbeda (<em>). 

6. Paragraph: menempatkan ruang antar blocks teks untuk 
membuat paragraph. 

7. Block Quote: Pilih teks yang diinginkan, suatu teks akan diberi 
tanda kutip dari sumber lain, dan klik tombol ini untuk mengubah 
format ke block quote. 

8. Preformatted Text: Teks akan terlihat monospace atau, 
fixewidth font.. 

9. Heading 1: Memilih teks ke ukuran besar. 

10. Heading 2: Memilih teks ke ukuran sedang. 

11. Heading 3: Memilih teks ke ukuran kecil 

12. Unordered List: Membuat daftar bulet 

13. Ordered List: Membuat daftar angka 

14. List Item: Mengijinkan anda untuk mengedit teks dari daftar 
item 

15. Definition List: Format otomatis ke daftar untuk definisi 

16. Definition Term: Format otomatis memasukkan definisi. 

17. Definition Description: Otomatis format deskripsi 

18. Abbreviation: Memasukkan dalam arti penuh 

19. Acronym: Memasukkan nama panjang dari acronim 

Frames 


Gunakan menu ini untuk mempermudah memformat frames 


10. 


Left Frame: Memasukkan frame pada sebelah kiri. 

Right Frame: Memasukkan frame pada sebelah kanan. 

Top Frame: Memasukkan frame di atas. 

Bottom Frame: Memasukkan frame disebelah bawah. 

Bottom and Nested Left Frame: Memasukkan frame utama 
dibawah, dan sebagian kecil dikiri. 

Bottom and Nested Right Frame: Memasukkan frame utama 
dibawah, dan sebagian kecil dibawah. 

Left and Nested Bottom Frame: Memasukkan frame utama 
disebelah kiri, dan sebagian frame dibawah. 

Right and Nested Bottom Frame: Memasukkan frame 
disebelah kanan, dan sebagian frame dibawah. 

Top and Bottom Frames: Memasukan fram diatas dan dibawah. 
Left and Nested Top Frame: Memasukkan frame utama disebelah 
kiri dan sebagian diatas. 


11.Right and Nested Top Frame: Memasukkan frame utama 


disebelah kanan, dan frame lainnya disebelah bawah. 


12.Top and Nested Left Frame: Memasukkan frame utama diatas, 


dan frame lainnya disebelah kiri. 


13.Top and Nested Right Frame: Memasukkan frame utama 


diatas, dan frame lainnya disebelah kanan. 
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Forms 


Agar Halaman Web lebih interaktif, anda bisa memasukkan element 
form. 


1. Form: Membuat area baru pada halaman web untuk form 

2. Text Field: Membuat kotak teks untuk user untuk 
memasukkan data dalam halaman web. 

3. Hidden Field: Bidang yang tersembunyi mengumpulkan informasi 
tentang pengunjung lokasi. Informasi menyimpan bidang 
dikembalikan kepada server ketika format disampaikan. 

4. Textarea: Sama seperti teks field, tapi diijinkan lebih dari satu 
garis teks untuk dimasukkan. 

5. Checkbox: Checkbox mengijinkan users untuk memilih pilihan 
dari list users bisa memilih lebih dari satu checkbox. 

6. Radio Button: radio button mengijinkan user untuk memilih 
satu pilihan dari daftar. 

7. Radio Group: Memasukkan lebih dari satu radio button pada 
daftar. 

8. List/Menu: Membuat menu panah bawah 

9. Jump Menu: Membuat jump menu. jump menu membawa users 
ke lokasi yang berbeda tergantung apa yang dipilih dalam menu. 

10. Image Field: Memasukkan image ke field 

11. File Field: Membuat file dalam field yang mana akan upload. 

12. Button: Ketika user memasukkan data ke form dan field, harus 
disampaikan melalui tombol. Tool ini memasukkan tombol pada 
halaman. 

13. Label: Membuat label untuk field. 

14. Fieldset: membuat tag untuk elemen group form. 


Characters 
Beberapa simbol umum dan karakter terdapat pada menu ini 


SoC RO EOI E Characters] Media| Head] Sent] Application] 
-|£ € ¥/© @7 


Insert 


Line Break: Membuat ruang antar baris. 

Non-breaking Space: Membuat ruang antar huruf dan kata. 
Left Quote: Membuat tanda kutip kiri. 

Right Quote: Membuat tanda kutip kanan. 

Em Dash: Memasukkan dash panjang ke halaman. 

Pound: Memasukkan simbol poundsterling. 

Euro: Memasukkan simbol mata uang Euro. 

Yen: Memasukkan simbol mata uang Yen Jepang. 
Copyright: Memasukkan simbol copyright 

10. Registered Trademark: Memasukkan simbol registered trademark. 
11. Trademark: Memasukkan simbol trademark 

12. Other Characters: Memilih dari tambahan set simbol untuk 
memasukkan karakter dalam halaman. 


ee a PO 
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Membuat Halaman 


Membuat Halaman Baru 


Ketika Dreamweaver MX dijalankan, halaman kosong biasanya tampil. 
Jika tidak, anda bisa membuat halaman web kosong dengan menuju menu bar 
dan memilih "File," dan lalu "New" (shortcut “Ctrl+N”). 


*j Macromedia Dreamweaver MX 


File Edit View Insert Modify Text 


Open... Ctrl-O 
Open in Frame... Gtit SMEO 
Glose Grr ei 
Save GtH+5 
Save As... Gtr +-Shift+S 


AVP AS Temnlate... 


Disebut juga “New Document” ini merupakan halaman kosong yang 
ditampilkan. Jika anda memulai halaman baru, mudah saja pilih “Basic Page” 
dari “Category” kolom, dan “HTML” dari “Basic Page” kolom. Klik pada “Create” 
untuk memulai halaman kosong. 


x 


General | Templates | 


Category: Basic Page: Preview: 


Basic Page @ HIM 

Dynamic Page @) HTML Template 

Template Page @ Library Item 

Other @ ss 

C55 Style Sheets @ JavaScript 

Framesets @ XML <No Preview> 
Page Designs 


Page Designs (Accessible) 


Description: 
HTML document 


[~ Make Document XHTML Compliant 


Help | Preferences... | Get More Content... Cancel | 


Membuka Halaman 


Websites coded menggunakan HyperText Markup Language, or HTML. 
Ini berarti, tipe file dari halaman web dalam internet adalah ".html." Web 
browser akan menampilkan files HTML (yang mana kita akan terlihat berbentuk 
kode-kode), dan tampilan seperti interface graphic, halaman web, untuk diatur 
oleh user. Untuk membuka halaman web (an .htm or .html document) dalam 
Dreamweaver MX, pergi menu bar dan pilih "File," dan lalu "Open." 
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"j Macromedia Dreamweaver MX 


File Edit View Insert Modify Text 


New... Ctrl-N 
Open... Ctrl+o 
Open in Frame... Gtr +Shitt+o 
Close Ctrl HW 


Gunakan window pops up untuk browse sampai komputer anda membuka 
file. Ketika anda menemukan file yang diinginkan, tekan Ctrl-O pada tombol 
“OK” 


CATATAN: Dreamweaver MX mampu membuka berbagai jenis file website, 
dengan mengabaikan bahwa itu dibuat dengan Dreamweaver MX atau bukan. 
Untuk contoh, jika anda memiliki file HTML yang anda buat sendiri tanpa 
Dreamweaver MX, anda bisa juga membukanya dan mengeditnya. Jika anda 
terbiasa dengan teknologi SSI, anda juga bisa membuka file ".shtml", yang 
mana telah di code dengan SSI 


Menyimpan Halaman Web 


Dalam Dreamweaver MX (dan aplikasi lainnya), anda harus selalu untuk 
menyimpan pekerjaan seperti biasanya. Untuk menyimpan file dalam 
Dreamweaver MX, pergi ke menu bar dan pilih "File," dan lalu "Save As." 


“#Macromedia Dreamweaver MX - [Unt 


A! File Edit View Insert Modify Text 


| ¢ New, Ctrl+N 

—B gaes Ctrl-O 
Open in Frame... Gtr +Shift+-o 

BR Close Ctrl 


Save Ctrl+s 
5 Ctrl+-ShiFt+5 


A 


Save as Template... 


Halaman Web dan Hubungannya dengan yang lain. 

Halaman pertama dari website akan mengacu pada "index page." 
Semua halaman utama untuk web adalah "index.html." Ini sangat penting 
untuk anda menyimpan halaman utama dalam index file (dengan menyimpan 
dalam bentuk "index.html"). 
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Save in | Si sample "| e aae 


File name: [index.html 


Save as type: [All Documents [*.htm:*. html;:*.shtm;*.shtml;*.hta;*. hte: stm”. ss Y Cancel | 


É 


Anda bisa menamakan apa saja halaman lain selain index files. Untuk 
contoh, kebanyakan isi link ke website lain disimpan dalam file "links.html" 
(atau, anda bisa membuat folder baru dalam directory yang sama dengan 
"index.html", beri nama folder itu "links," dan simpan link halaman anda 
pada directory baru sebagai "index.html"). 


Untuk contoh, halaman utama URL seperti ini: 


http://www.harisfc.com /~yourusername/index.html (dimana 
"yourusername" adalah haris). Alternatif lain, anda bisa memasukkan 
"http://www.harisfc.com/~yourusername" dan ini tetap meload pada file 
"index.html". 


Secepatnya, anda ingin memiliki halaman yang ingin di "link". Pastikan 
nama file, dan atur halaman secara teratur. Simpan semua files dalam folder 
yang sama. Jangan gunakan karakter khusus. 


Berbagai Halaman dengan Style yang Sama. 

Anda mungkin merasa seperti sesuatu yang kecil pada halaman ini, tapi 
itu tidak apa-apa! Ketika anda belum mempelajari bagaimana format halaman, 
anda belajar bagaimana membuat dan menyimpannya, yang mana merupakan 
faktor yang sangat penting untuk dimengerti bagaimana bekerja dengan 
berbagai halaman yang mempunyai style yang sama. 


Anda akan memiliki berbagai halaman web dalam situs anda, dan 
dipastikan untuk anda menginginkan semua memiliki layout dan navigasi yang 
sama, tapi isi yang berbeda. Ada beberapa alasan. Alasan utama anda ingin 
situs kelihatan bagus . Jika pengunjung pergi ke halaman berbeda pada situs 
anda, dan ingin melihat yang berbeda, dia akan berfikir berada pada situs yang 
berbeda. 
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Page Properties 


Ketika anda mendesain sebuah situs, yang anda inginkan adalah situs anda 
kelihatan berbeda. Untuk pemula, anda bisa mengubah stye dari link, warna halaman, 
dan fitur lain pada Page Properties Drewamweaver MX 


Membuka Properties Halaman 


Anda bisa membuka Page Properties pada windows dengan menuju menu bar 
dan pilih "Modify," lalu "Page Properties," merupakan pilihan pertama dari daftar 
menu. Pilih Page Properties, dan akan muncul jendela menu. 


Modify Text Commands Site Window 


Page Properties... 


Template Properties... 
v Selection Properties — Ctrl4+Shift+J 


Felit Tan... 


Jalan lain untuk membuka Jendela Page Properties dalam Dreamweaver adalah 
dengan menggunakan klik kanan pada mouse di sembarang halaman. Lalu, 
akan muncul menu, dengan Page Properties sebagai pilihan. Anda bisa memilih 
pilihan disini. 

apy 


Paste 


Design Notes for Paae... 
Page Properties... 


right-click on your page to get "Page Properties" 


Halaman Properties Window 

Diikuti oleh diagram Image dengan fitur yang berbeda pada meun 
Page Properties. Baca jumlah daftar dibawah dan gunakan corresponding 
numbers pada image untuk melihat tool yang sedang dikerjakan. 


Page Properties Jin x| 


1 Tie: Untitled Document 


2 Background Image: | O Oů Browse... | 
3 Background: _ | 

Â Text: Ci | 6 Visited Links: | i 

B Links: i= II o T Active Links: Fi | 

Left Margin: II isd Margin Width: [ 

Top Margin: TN a Margin Height: na 

@ Document Encoding: (Western (Latin) ¥) Reload | 

90 Tracing Image: II | Browse... | 


D Image Transparency: i... 


T ransparent Opaque 


42 Document Folder: C:\Documents and Settings\GuestSMy Documents: 
93 Site Folder: C:\Documents and Settings\Guest\My Documentsit 


ox | 
Apply | 
Pe 


Cancel 


Help | 


1. Title: Masukkan judul dari web anda disini, seperti yang anda ingin tampilkan 


pada judul browser. 


2. Background Image: Jika anda ingin background web anda menjadi image, 
dan tidak memakai warna pekat, gunakan tombol "Browse" disini untuk 
menemukan gambar pada komputer anda yang anda inginkan untuk digunakan 
sebagai background. Secara umum, Image ini akan berulang-ulang menempati 


halaman. 


3. Background: Jika anda ingin membuat background halaman web anda 
berwarna hitam pekat, dan bukan berupa image, gunakan warna pada kotak 


teks untuk memasukkan warna hexadecimal 


4. Text: Mengijinkan anda untuk memilih warna teks halaman web anda. 
5. Links: Mengijinkan anda untuk memilih warna untuk link yang belum 


pernah dikunjungi. 


6. Visited Links: Mengijinkan anda memilih warna untuk link yang telah anda 


kunjungi. 


7. Active Links: Mengijinkan anda untuk memilih warna untuk aktif link. Aktif 
link berstatus ketika link diklik. Warna default untuk aktif link adalah merah. 

8. Margins (Left Margin, Top Margin, Margin Width, Margin Height): 
Menentukan garis tepi tidaklah dibutuhkan, tapi dengan membuat garis tepi 


pada halaman web menjadi berbeda. 


9. Document Encoding: Mengeset bahasa teks encoding untuk 


Halaman 


Tracing Image: Jiplakan gambar adalah image (membuat seperti kelihatan | 
ayout website) yang dihasilkan suatu program grafik terpisah. Kemudian 


dibawa ke Dreamweaver MX 


11.Image Transparency: Membuat image menjadi transparan. 
12.Document Folder: Lokasi halaman web dalam komputer. 
13.Site Folder: Lokasi halaman web dalam komputer. 
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Text and Text Properties 


Text 

Seperti anda bekerja dengan Dreamweaver MX, Anda akan 
menemukan jalan serupa untuk ke suatu program, anda akan bekerja dengan 
masa lalu, seperti Microsoft Word. Ada banyak option dan fitur yang bekerja 
serupa dan jalan sama dalam program. Beberapa lebih dari fitur dasar bekerja 
dengan teks, dan format teks. 


Untuk memulai memasukkan teks ke halaman web dalam Dreamweaver MX, 
gunakan kursor dan klik dimana saja pada halaman dan ketikan. 


Properties 

Properties panel (jangan dipusingkan dengan halaman properties 
window, akan dibicarakan pada bagian lain) bisa ditemukan ketika melewati 
bawah layar. Untuk memasuki option lebih, klik segitiga putih kecil 
selanjutnya ke “Properties.” Ini akan memperluas jendela. 


Jika anda tidak melihat Properties window, pergilah menuju menu 
bar, lalu ke “Window” dan pilih “Properties.” 


Properties Window 

Mengedit teks dengan Macromedia Dreamweaver MX tidaklah berbeda 
dari mengedit dengan Microsoft word. Perbedaan hanya pada Dreamweaver 
MX, teks format dan properties lain tidak dikendalikan dalam menu utama pada 
atas layar, tapi dalam jendela (atau "palette") disebut juga "Properties." 


The Properties panel (jangan dipusingkan dengan halaman properties 
window, akan dibicarakan pada bagian lain) bisa ditemukan ketika melewati 
bawah layar. Untuk memasuki option lebih, klik segitiga putih kecil 
selanjutnya ke “Properties.” Ini akan memperluas jendela. 


Jika anda tidak melihat Properties window, pergilah menuju menu bar, 
lalu ke “Window” dan pilih “Properties.” 


Anda akan menggunakan jendela Properties window untuk memformat 
dan mengedit kebanyakan isi dalam halaman web. Tolong dicatat bahwa palette 
properties mengubah penampilan tergantung dari apa isi dari yang sedang anda 
kerjakan. Untuk contoh, mengedit teks dengan membuat palette properties 
ditampilkan dengan satu cara, ketika mengedit tabel membuat palette tampil 
dalam cara yang berbeda. Kita akan kembali ke status yang berbeda dari 
palette properties ketika kita bicara mengenai tabel dalam bagian lain. 


Segera, kita akan melihat fitur yang berbeda dari palette properties. Daftar 
nomor yang sesuai dibawah dengan gambar palette properties. Gunakan 
gambar ini untuk membantu anda belajar fitur yang berbeda dalam Palette. 


1. Minimize: Klik pada segitiga kecil untuk meminimizes window. Klik 
sekali lagi untuk memperluasnya. 

2. Format: Set paragraf format ke teks yang ingin anda pilih. 

3. Font: Mengubah style font dengan memilih teks (seperti Arial atau Times 

New Roman). Hanya font yang di install dalam komputer user yang bisa 

digunakan dalam halaman web. Peringatan bahwa Dreamweaver MX 

menyediakan kombinasi font umum yang ditemukan dalam Windows dan 

Mac computer. 

Size: Mengubah ukuran teks yang dipilih. 

Text Color: Klik untuk mengubah warna teks. 

Hexadecimal Color Value: Kotak teks mengijinkan anda untuk 

mengubah warna teks dengan memasukkan nilai hexadecimal (i.e.: black 

= #000000) 

7. Bold: Menebalkan teks yang dipilih 

8. Italic: Memiringkan teks yang dipilih 

9. Align Left: meratakan teks disebelah kiri. 

10.Align Center: Meratakan teks ditengah 

11.Align Right: Meratakan teks yang dipilih kesebelah kanan. 

12.Justify: Garis tepi yang diluruskan baik sebelah kanan maupun kiri. 

13.Link: Dengan memasukkan URL (alamat website), anda bisa memilih teks 
untuk dijadikan hyperlink. 

14.Point to File: Digunakan bersama menu file. Drag dan drop pointer ke 
daftar file dalam lokal atau situs untuk membuat link. 

15.Browse for File: Klik icon folder, dan browse file dalam komputer 
untuk kembali ke link. 

16.Target: isi Link kemampuan untuk membuka dalam lokasi yang berbeda. 
Gunakan Target, anda akan menset link untuk membuka halaman dalam 
jendela baru, atau dalam frame yang berbeda. (jika anda membuat frame 
dalam halaman). 

17.Unordered List: Membuat daftar bullet (unordered). 

18.Ordered List: Membuat daftar angka (ordered). 

19.Text Outdent: Memilih teks pada sisi halaman. Dengan mengklik pada 
outdent icon beberapa kali menset teks lebih dekat ke tepi halaman. 

20. Text Indent: Memilih teks pada kedua sisi halaman. Dengan mengklik 

icon indent beberapa kali membuat teks menjauh dari tepi halaman. 

21.Help: Klik pada “?” icon membawa Dreamweaver MX ke help 
dokumen. 

22.Expand/Collapse: Mengklik pada segitiga kecil memperluas window 
properties. Klik didalamnya sekali lagi untuk meminimize window. 


ua 
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Tolong diingat bahwa “Text” pada menu kebawah pada menu bar bisa juga memenuhi 
lebih dari fungsi yang terdaftar diatas. Jika anda merasa lebih nyaman mengedit teks 
menggunakan menu ini, lakukanlah. 


(Untitled Document (Untitled-1 


Text Commands Site Window t 


Indent Ctrl+Alt+] 
Outdent Ctrl+Ale+[ 
Paragraph Format b 
Align , 
List b 


Font 

Style 

HTML Styles 
CSS Styles 
Size 

Size Change 
Color... 


ba Ne oe a, one A 


Check Spelling Shift-+F7 


Cascading Style Sheets 


Seperti yang telah anda baca pada bagian sebelumnya, "style" adalah format 
spesifik berlaku untuk teks yang kecil maupun teks yang besar, terhadap satu atau 
banyak dokumen. Anda bisa gunakan (atau membuat) "style" yang dapat anda 
terapkan ke seluruh dokumen anda (atau beberapa dokumen) ke variasi umum teks 
untuk menjaga tampilan kelihatan biasa untuk halaman. Ini Disebut "Cascading Style 
Sheets." Sesuatu yang ajaib mengenai CSS yaitu pengaturan berbagai hal yang 
spesifik dalam halaman web bisa dikontrol dengan melalui sytle sheet. Sheet ini bisa 
diedit, dan bisa diubah dalam style sheet akan otomatis ditampilkan dalam halam web 
yang menggunakan style sheet. Ini adalah solusi yang sempurna untuk bekerja 
dengan halaman yang banyak dan untuk menjaga konsistensi style. 


Untuk melihat keberadaan style sheets, pergi ke “Text” pada menu bar dan pilih 
“CSS Styles” untuk melihat option CSS. 
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[Untitled Document (Untitled-1*)] 


Text Commands Site Window Help 


Indent Ctrl+Alt+] 

Outdent Ctrl+Alt+[ 

Paragraph Format 

Align 

List 

Font > 

Style > 

HTML Styles > 

CSS Styles la v None 

Size > 

Size Change b To Cas kee k 

Célor... Edit Style Sheet... Ctrl+Shift +E 

Attach Style Sheet... 

Check Spelling Shift+F7 Export G55 Styles,,, 

| Design Time Style Sheets,,, 


Dari ini, anda bisa memilih untuk menggunakan CCS style yang baru (ini akan 
otomatis menanyakan anda untuk menyimpannya dalam style sheet yang baru), edit 
style sheet sebelumnya yang telah ada, atau menyertakan style sheet dalam 
halaman. 


Anda bebas menerapkannya, sesuai dengan kebutuhan, style untuk 
dokumen. Bagaimanapun juga, ini tidak diperlukan jika anda membuat halaman 
kecil. Ini merupakan fitur untuk profesional dan akan membantu anda untuk masa 
depan proyek web. 


Membuat Style Baru dalam Style Sheet Design Panel 

Jika anda tidak pernah membuat style sheet sebelumnya, jangan 
khawatir. Anda bisa membuat salah satunya dengan menggunakan panel 
“Design” panel pada Dreamweaver MX. Alternatif lain, anda bisa memilih hand- 
code style sheet, simpan dan gunakan dalam halaman web (lihat keterangan 
dibawah untuk informasinya). Untuk sekarang, mari kita bicarakan bagaimana 
membuat style sheet dalam Dreamweaver MX's “Design” panel, tanpa 
melakukan hand-coding. 


Dalam “Design” panel, klik pada icon “New CSS Style” . 


< “ Design 

CSS Styles| HTML Styles | Behaviors 
{© Apply Styles (“ Edit Styles 
Æ Mo CSS Style 


Aam 


Anda akan dibawa ke jendela “New CSS Style”. 


New CSS Style 


Name: X 
Type: ( Make Custom Style (class) Cancel | 


© Redefine HTML Tag 
C Use CSS Selector 


Define In: € | stylesheet.css z 


™ This Document Only Help | 


Beri style anda dengan nama yang unik dalam kotak teks. Catatan : 
style anda harus dimulai dengan (“.”), dan tidak boleh ada ruang antar kata. 
Jalan terbaik untuk membedakan antar kata tanpa menggunakan ruang adalah 
dengan penggunaan huruf kapital dalam huruf pertama dalam setiap 
pekerjaan. Bagaimanapun, kata pertama didalam name harus huruf kecil. 
Contoh gunakan kata “sayaPenulis” 


Untuk “Type,” pilih “Make Custom Style (class).” Ini berarti anda akan 
membuat style dari awal. Klik tombol "OK" 
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Saye Style Sheet File As | E mixi 


Select File Name From: ¢* File system 
€ Data Sources 


Save in | Sy collaborative Temui 


File name: [stylesheet.css 
Save as type: [Style Sheet Files (* css] "| Cancel | 


URL: file: 2/CWD ocuments and Settings/Guest/My D 
Relative To: (Document "| 


Document should be saved to use this option. 


ó 


“Save Style Sheet As” akan muncul. Beri style anda nama unik, dan yakinkan 
bahwa akhirannya adalah “.css”. ketika anda mengklik “Save,” style sheet baru 
file akan disimpan, dan anda bisa memulai untuk membuat sytle anda sendiri. 
Untuk informasi lebih bagaimana membuat style, abaikan bagian berikutnya, 
dan pergilah ke “Create a New Style For Your Style Sheet.” 


Membuat Style Baru Dari Awal 
Membuat style anda sendiri dari awal akan sangat sulit untuk pertama 
kali, tapi pada akhirnya, akan menjadi mudah juga. 


Untuk memulai new style sheet, pilihlah menu bar dan pilih “File” lalu 
“New.” Dari jendela ini muncul, yakinkan anda dalam daerah tab “General”. 
Lalu, yakinkan anda memilih “Basic Page” dari “Category” kolom, dan pilih 
“CSS” dari kolom “Basic Page”. Ketika ini dipilih, klik pada tombol “Create” . 
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New Document "3 4 x| 


General | Templates | 


Category: Basic Page: Preview: 
Basic Page HTML 
Dynamic Page HTML Template 
Template Page Library Item 
Other 
CSS Style Sheets @ JavaScript 
Framesets @ XML «No Preview 
Page Designs 
Page Designs (Accessible) 
Description: 


Cascading Style Sheet (CSS) document 


TC Make Document XHTML Eompliant 


Help | Preferences... | Get More Content... Cancel | 


halaman kosong akan muncul dengan kata “/* CSS Document */” di 
bagian atas. Komentar ini menandakan anda bekerja dengan style sheet. Ini 
tidak akan memberikan efek pada code yang anda buat. 


Hand-Code New Style 
Sekarang waktunya untuk menseting style anda sendiri. 


Body 

Style pertama yang harus anda buat adalah muka halaman 
tersebut. Untuk membuat style untuk “Body,” mudah ketik saja “BODY” 
diikuti dengan membuka tanda kurawal {. Setelah ini, tekan “Enter” 
untuk berpindah pada baris baru. Anda akan memilih warna 
background halaman web, dan ini akan dikendalikan dalam “BODY” 
style. Dalam baris, ketiklah : 


background-color: #CCCCCC; 


Ini akan memberi semua halaman yang dibuat style sheet anda 
berwarna kelabu. 


Tekan enter sekali lagi untuk berpindah ke baris baru. Sekarang, 
anda ingin membut style kontrol font untuk teks pada halaman anda. 
Pada baris ini, ketik : 


font-family: Arial, sans-serif; 
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Sekarang, teks anda membutuhkan ukuran. Buat baris baru, 


dan ketik : font-size: 10pt; 


Ini akan mengatur semua karaktersitik “BODY” style. Sekarang 


waktunya untuk menutup tag. Lakukan ini dengan mengetikan tanda 
“y” setelah bari kode terakhir 


Pada Dreamweaver MX, style sheet anda harus terlihat seperti ini : 


BODY { 
background-color: #CCCCCC; 
font-family: Arial, sans-serif; 
font-size: lOpt; 


Menyimpan Style Sheet 


Mari kita simpan style sheet lalu terapkan pada halaman web. 
Pergilah ke menu bar dan pilih “File” dan lalu “Save As.” Beri style 


sheet nama, dan masukkan “.css” di akhri nama file. Untuk contoh, 
anda bisa memberi nama file “stylesheet.css”: 


Save AS eee 
Savein|amyste O de EK EE 


File name: [stylesheet. css 
Save as type: |All Documents (“ htm:*. html:*.shtm;*.shtml:*. ht ¥ Cancel | 


Í 


Sekarang anda telah menyimpan style sheet, anda bisa 
menerapkan ini pada banyak halaman pada halaman web anda. 
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Menerapkan Style Sheet Pada Halaman. 

Buka Halaman pada Dreamweaver MX. Karena kita akan bekerja 
dengan style sheet, anda akan membutuhkan untuk memasuki panel “Design”. 
Jika ini belum siap buka, lalu menuju ke menu bar dan pilih “Window” dan 
“CSS Styles.” Ini akan membuka panel “Design” panel, jika ini belum dibuka. 


ntitled-4)J 


Window Help 
¥ Insert Ctrl+F2 
v Properties Ctrl+F3 
Answers Alt+F1 
Shift+F 11 
HTML Styles Ctrl+F 11 
Behaviors Shift--F3 


Pada panel “Design” panel, klik pada icon kecil yang bernama “Attach 
Style Sheet.” Yang terdapat diurutan sebelah kanan, terletak pada panel 
sebelah bawah 


x w Design 


Akan muncul jendela menanyakan anda untuk membrowse komputer 
anda untuk style sheet untuk dimasukkan ke halaman. Klik pada tombol 
“Browse” untuk mencari file. Yakinkan tombol “Link” terpilih. 


xi 
File/URL: | Browse... | 


Add As: (© Link Cancel | 
C Import 
Help | 


Ketika anda telah menemukan file yang akan disertakan, klik tombol “OK”. 


Link External Style Sheet 


Kembali ke “Design Panel" dan klik pada tombol radio ke “Edit Styles." 
Dalam mode ini, anda bisa mengedit sytle sebelumnya, dan membuat beberapa 
yang baru dengan menggunakan Dreamweaver MX's "CSS Style Definition” 
menu, yang mana akan segera anda lihat kemudian. Anda akan juga mencatat 
bahwa semua style yang anda buat dalam sheet akan terdaftar disini. 
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x w Design 


2 Apply Styles we 1 
Untitled-4 
stylesheet.css 
- BODY 10pt Arial backgro... 


Seperti anda lihat, nama style (dalam kasus ini, hanya “BODY” style 
telah didefinisikan dalam style sheet) dan properties (terletak dalam kolom 
kanan) terdaftar dan juga anda sebaiknya menjaga style anda. 


Menerapkan Stlyle Ke Teks 
Point utama membuat style adalah format teks dan element halaman web 
dalam beberapa cara. Menerapkan teks style sangat mudah. 


Pertama, sorot teks (atau area lain dalam halaman web anda) yang ingin 
anda terapkan style. 


Here is the first section 


Lalu, pergilah ke panel “Design”, yakinkan bahwa anda di dalam “CSS Styles” 
tab, dan memiliki “Apply Styles” tombol radio diklik. “Apply Styles” pada mode 
yang anda butuhkan untuk dilakukan. 


< w Design 


Æ NoCss Style 
© linkSmall 
a$ mainT ableBorder 
of menuHeading 
ef navComingSoon 
af navLinks 

af navVideos 

ef textSmall 


Cari stye yang akan diterapkan pada teks yang dipilih. Lalu klik pada nama 
style. 
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= w Design 


te Apply Styles Edit Styles 


Æ NoCss Style 
of linkSmall 
a$ mainTableBorder 
af menuHeading 
ef navComingSoon 
of navLinks 

af navVideos 

of textSmall 


Style akan segera diterapkan ke teks yang disorot. 
Heading 1 
Here is the first section) 


Menghilangkan Style dari Teks 

Menghilangkan style pada teks atau elemen halaman web lain adalah 
mudah. Pertama, letakan kursor dalam teks dengan style yang akan 
dihilangkan. 


Heakling 1 


Lalu, pergilah ke panel “Design”, dan pilih pilihan pertama yang ada 
didaftar, “No CSS Style”. 


A NoCSS Style 
© linkSmall 
a$ mainTableBorder 
af menuHeading 
a$ navComingSoon 
ef navLinks 

of navVideos 

of textSmall 


Klik pada “No CSS Style” akan menghilangkan style dari teks. 


Membuat style baru untuk style sheet 

CSS adalah tool yang luar biasa karena anda bisa membuat style 
tanpa batas apapun juga pada halaman web. Anda bisa membuat style 
hanya untuk headings, links, table borders, atau apa saja yang anda 
bayangkan. Gunakan “Design” panel dalam Dreamweaver MX, anda bisa 
dengan mudah membuat styles yang baru. 


Pada “Design” panel, klik pada icon “New CSS Style” (ini akan terlihat seperti 
bagian dari kertas dengan tanda a +). Jendela berikutnya akan muncul : 
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Name: = 


Type: (@ Make Custom Style (class) 
C Redefine HTML Tag 
© Use CSS Selector 


Define In: ( [stylesheet css "| 
C This Document Only Help | 


Beri style anda dengan nama yang unik dalam kotak teks. Catatan : 
style anda harus dimulai dengan (“.”), dan tidak boleh ada ruang antar kata. 
Jalan terbaik untuk membedakan antar kata tanpa menggunakan ruang 
adalah dengan penggunaan huruf kapital dalam huruf pertama dalam setiap 
pekerjaan. Bagaimanapun, kata pertama didalam name harus huruf kecil. 
Contoh gunakan kata “sayaPenulis” 


Untuk “Type,” pilih “Make Custom Style (class).” Ini berarti anda 
membuat style dari awal. Klik tombol “OK”. “CSS Style Definition” jendela 
akan muncul. 


CSS Style Definition for .smallHeading in stylesheet.css ME xi 


Category Type 


Background 5 rf 
Block : 
Box 5 
Border Weight: | "| 
List 
Positioning : Variant: | "| 
Estensions 
Line Height: | "| Case: | "| 
Decoration: |” underline Color: Gl 
Tl overline 
P line-through 
|” blink 
|” none 


Cancel | Apply | Help | 


Pada posisi ini, anda bisa menggunakan berbagai jenis menu untuk 
membuat style anda sendiri. Ini harus digunakan, tapi anda akan bisa 
menggambarkan style yang mana untuk membuat efek. Kebanyakan kategori 
cukup jelas, jadi putuskan style apa yang mudah dibuat. Ingat bahwa style 
bisa memiliki banyak atribut yang anda inginkan, tapi anda tidak harus 
membuat satu style. Anda bisa membuat sytle yang anda inginkan untuk 
mengatur format yang berbeda dan element style. 


Sekali anda buat style, klik tombol “OK”. Ini akan otomatis menyimpan style 
sheet yang baru dalam style sheet, dan anda akan melihat daftarnya dalam 
“Design”. 


|“ Design 


. Apply Styles te Edit Styles 
Untitled-4 


E] stylesheet.css 
BODY 


.smallHeading 


10pt Arial backgro... 
10pt Arial #0099C... 


Mengedit Style 

Anda bisa mengedit style apa saja yang anda buat dengan style sheet 
kapan saja. Hanya dengan mengklik style yang ingin diedit ketika anda berada 
di dalam mode “Edit Styles”, dan klik pada icon “Edit Style” (icon pada sebelah 
kanan bawah panel, tersamar seperti pensil). 


“CSS Style Definition” akan muncul, dan anda bisa mengedit style yang 
diinginkan. Klik “OK” ketika anda selesai dan akan membuat efek perubahan. 


Menghapus Style 

Jika anda membutuhkan untuk menghapus style dari style sheet, sorot style 
dalam “Edit Styles” mode pada “Design” panel, dan klik pada “Delete CSS 
Style” icon (tombol akan tersamar seperti sampah, pada pojok kanan bawah 
panel). 


Tabel 


Tabel yang terdiri dari sel yang dibentuk dari baris dan kolom, bisa digunakan 


dalam berbagai cara ketika mendesain website. Dengan menggunakan tabel, anda 
bisa mengatur teks, gambar, dan banyak lagi layout halaman web. Bagian tutorial ini 
akan mengajari anda bagaimana cara menggunakan tabel dalam Dreamweaver MX. 


Memasukkan Tabel 


Untuk memasukkan tabel ke halaman web dalam Dreamweaver MX, pergilah ke 
menu bar dan pilih "Insert," dan lalu "Table.” 


amweaver MX - (Untitled Document (Untitld 


Insert Modify Text Commands Site Wind 


Tag... Ctrl-E 

Image Ctrl--Alt--I 
Image Placeholder 

Interactive Images + 
Media r 
Table Ctrl+Alt-+T 
Table Objects + 
Layer 

Frames k 
Template Objects + 


Alternatif lain, anda bisa memasukkan tabel dengan mengklik pada 
tab “Tables” pada Insert panel, dan klik icon pada “Insert Table”. 


“j Macromedia Dreamweaver MX - [Unt 


fad File Edit view Insert Modify Text 


Ketika anda memilih Insert >> Table, akan muncul jendela. Ini akan 
menanyakan anda untuk memasukkan beberapa informasi mengenai tabel. 
Informasi yang anda masukkan dalam jendela tabel akan memutuskan seperti 
apa tabel yang terlihat. Jendela ini memiliki ruang teks yang perlu anda 
ketahui. Baca daftar nomor dibawah dan gunakan angka yang sesuai pada 
gambar untuk melihat bagaimana untuk menyisipkan tabel anda : 


x 
q 8 
a E Cell Bea 2 | | 
Columns: [3 Cell Spacing: E Cancel | 


(5) 
Width: (100 [Percent x] Help | 
6 Percent 
Border: [1 


1. Rows: Baris dibuat sel dengan garis horizontal. Dalam kotak teks, anda 
masukkan berapa banyak baris yang anda inginkan berada pada tabel ini. 


2. Columns: Kolom dibuat dari sel yang vertikal. 

Cell Padding: nilai spesifik pixel antara sel dan isi. Masukkan 0 untuk no 
padding. 

3. Cell Spacing: nilai spesifik pixel antar sel. Masukkan O untuk tanpa space. 
Width: nilai lebar tabel. Berdasarkan pixel atau persentase dalam browser 
window. 

5. Border: nilai spesifik lebar garis batas tabel. Masukkan nila 0 jika tidak 
ingin ada batas. 


Klik "OK" ketika anda selesai memasuki semua informasi ke field. Tabel akan 
muncul dalam halaman web. Anda bisa mengklik dan drag tepi tabel untuk 
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mengubah dimensi tabel. 


Mengedit Properties Tabel 

Ketika anda memiliki tabel dalam halaman web anda, Dreamweaver 
MX akan mengijinkan anda untuk mengedit tabel dalam banyak cara. Dengan 
menggunakan Properties palette, anda bsia memodifikasi beberapa aspek 
dalam tabel . 


Untuk mengedit tabel anda dengan menggunakan Properties palette, 
anda harus memilih tabel anda. Anda bisa memilih tabel dengan mengklik 
pada outer border. Anda juga bisa mengklik kanan didalam tabel dan memilih 
“Select Table” dari menu. Ini meninggalkan sedikit kesempatan untuk 
kesalahan yang tidak disengaja dalam tabel dengan mengklik pada border. 
Sekali itu dipilih, anda akan diberi pesan bahwa window properties telah 
berubah secara penampilan, sekarang telah siap mengedit tabel anda. 


* w Properties 


| = = Table Id Rows |3 Ad 100 [x =] CellPad l2 | Align [Defaut =] 
— Cols |3 H [pixels z | CellSpace|2 Borderi 
Shi Bg Color [A Brdr Color (NN 
ITE] Bomag! aN 


Semua fields dalam Property palette untuk membuat tables sama 
dengan membuat field ketika anda pertama kali memasukkan tabel. Ada 
beberapa masukkan. Anda bisa melakukan penyesuaian dalam tabel, 
masukkan background atau warna garis ke tabel, masukkan background image, 
dan suatu setingan tabel. Anda juga bisa kembali mengedit jumlah baris dan 
kolom dalam tabel anda, melakukan penyesuaian lebar dan tinggi dalam pixel 
dan persen, dan modifikasi sel, sel space, dan garis batas. 


Menu Tabel 

Sebagai tambahan menggunakan Properties palette untuk mengedit 
tabel, anda juga bisa memodifikasi tabel dengan menggunakan tabel menu. 
Dalam tabel anda, yakinkan anda memiliki beberapa sel, kolom, atau tabel. 
(pilih apa saja bagian dari tabel yang diinginkan, tergantung apa yang ingin 
diedit). Dengan beberapa sel yang dipilih, lalu ke menu bar dan pilih "Modify," 
dan "Table." Dibawah menu tabel, akan muncul beberapa pilihan option. Option 
dalam tabel menu bisa digunakan untuk mengedit tabel dalam beberapa cara 
sebelumnya. Disini daftar fitur dalam menu ini 


er MX - (Untitled Document (Untitled-1*)) 


Modify Text Commands Site Window Help 


Page Properties... Ctrl acters | Media | H 
Template Properties... 
v Selection Properties — Ctrl+-Shift+J 


Edit Tag... C au B, 
Quick Tag Editor Ctrl+T 
Make Link Ctrl+L 
Remove Link GIS | 
Open Linked Page... 
Link Target b | 
Select Tatie Cola 

Frameset , a 
Navigation Bat Merge Gells Grrl AlEM 
Vayigenon bar 

: Split Cell... CtrAll4 5 
Arrange La 

TAN Insert Row Ctrl+M 
Align > i 
Insert Column Ctrl+Shift-+A4 
Convert b 
Insert Rows or Columns... 

Librar > 

i Delete Row Ctrl+Shift+M 
Templates , : 

Delete Column Ctrl+Shift+- 
Timeline > 


Increase Row Span 
Increase Column Span Ctrl+Shift+] 
Decrease Row Span 
Decrease Column Span Ctrl+Shift+[ 


Select Table: 
Pilihan ini memilih semua tabel yang anda miliki. 


Merge Cells: 
Ini adalah suatu pilihan yang sangat membantu anda untuk menggabungkan 
beberapa sel ke dalam satu sel. 


Split Cell: 
Dengan memilih atau menempatkan menyisipkan dalam sel, anda bisa 
membagi sel ke beberapa baris atau kolom. 


Insert Row: 
Untuk menyisipkan baris baru, dan pilihan ini akan menyisipkan satu baris 
baru. 


Insert Column: 
Seperti diatas, option ini untuk menyisipkan satu kolom. 


Insert Row of Columns: 

Pilihan ini memberi anda lebih dari flexsibilitas dari dua pilihan diatas. Anda 
bisa memilih berapa banyak baris atau kolom yang ingin dimasukkan, dan 
dimana anda ingin menyisipkannya. 
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Delete Row: 
Pilih ini untuk menghapus baris. 


Delete Column: 
Pilih ini untuk menghapus kolom. 


Increase/Decrease Row/Column Span: 
Dengan memilih baris atau kolom, anda bisa membuat ini lebih luas atau lebih 
kecil. 


Tolong catat menu ini juga bisa diklik dengan mengklik kanan di dalam tabel, 
dan pilih option yang dibutuhkan. 


Images 


Images adalah bagian yang penting dalam web. Jika anda tidak memiliki 
image, halaman web anda tidak menarik untuk para pengunjung situs anda. Tapi, jika 
anda terlalu banyak image, maka akan mengaburkan teks tulisan yang ingin anda 
tujukan kepada para pengunjung ! Ketika anda belajar bagaimana menyertakan image 
ke dalam halaman web anda, anda harus tetap realistik dan mengaturnya dengan baik 
antar teks dan image. (dan tentu saja, hanya memasukkan gambar yang relevant 
dengan situs anda). 


Dimana Mendapatkan Images 

Anda bisa memperoleh image untuk halaman anda dari berbagai tempat. 
Gunakan scanner untuk menscan gambar anda, atau memakai kamera digital 
untuk memasukkan gambar secara digital. 


Anda juga bisa memperoleh images dari sumber lain dalam internet, di situs- 
situs lain, cobalah cara dibawah ini : 


e  Free-Clip-Art (http://free-clip-art.com) 

e Google Image Search (http://www.google.com/imghp?hl=en 

e AltaVista Image Search 
(http://www.altavista.com/sites/search/simage) 

e Microsoft Design Gallery Live (http://dgl.microsoft.com) 


Ada banyak tempat untuk menemukan image yang sesuai dengan situs yang 
anda buat. 


Sebelum menggunakan images dari situs lain, yakinkan bahwa itu tidak 


dipatenkan, karena kalau sudah dipatenkan anda tidak bisa 
menggunakannya. 
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Setelah anda mempunyai image, yakinkan untuk menempatkannya disuatu 


tempat yang dekat dengan dokumen halaman web. Ini adalah tempat yang 


biasa untuk meletakkan image : 


1. Pada direktory yang sama (folder) dimana anda menempatkan halaman 


web dokumen. 


2. folder didalam direktory yang diberi nama "images" yang mana akan 
menyimpan semua image dalam situs anda. Ini sangat penting untuk 
menjaga image yang anda miliki terkelola dengan baik. 


Memasukkan Image 


Tempatkan kursor dimana anda akan memasukkan gambar (bisa juga 
dialam sel tabel) Lalu ke "Insert" menu diatas layar, dan klik "Image.” 


amweayer MX - (Untitled Document (Untitld 


Insert Modify Text Commands Site Wind 


Tag... Ctrl+E 

Image Ctrl+Alt-+1 
Image Placeholder 

Interactive Images + 
Media r 


Anda bisa juga memilih "Insert Image" pada tab “Common” pada “Insert” panel 


pada atas layar. 


Kotak "Select Image Source" akan muncul. Browse dimana image 
disimpan, dan pilih file yang ingin dimasukkan ke dalam halaman web. 


Select Image Source 


Select File Name From © File system 
C Data Sources 


Look in: | SI images "| © © 


By css-01 
& getting started-O1 
getting started-O2 
AY getting started-03 
BI getting_started-04 
cf getting_started-05 


IBT getting_started-06 [EY getting_started-12 
IBT getting started-07 BY getting_started-13 
IB getting_started-08 BF getting_started-14 
IBT getting started-09 BF getting_started-15 
IBY getting started-10 |E getting_started-16 
(Bf getting started-11 (Bf getting started-17 


File name: 


Ioetiraustated02 o CO 
aa] 


Files of type: 


URL: [file:/7/C Documents and Settings/Guest/My D 


Relative To: (Document =| Untitied-1 
Document should be saved to use this option. 


IV Preview Images 


500 x 360 GIF, 16K /5 sec 
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Jauh disebelah kanan, anda akan bisa melihat Image Preview dari image 
yang anda pilih. Ini berguna jika anda tidak ingat nama sebenarnya file yang 
anda punya. Dibawah image preview, akan terdapat daftar pixel dari image, 
ukuran field, dan berapa lama jika dibuka memakai dial-up Internet connection. 
Klik “OK” untuk menyisipkan image dalam halaman. 


Dreamweaver MX supports tiga format images. 


GIF (*.gif") Ini adalah format standar, dan memliki 256 warna atau kurang. 
Ini cocok untuk internet, image akan tampil dalam halaman web. 


JPG or JPEG (*.jpg, *.jpeg) Format ini dibuat oleh the Joint Photographic 
Experts Group. Memiliki kedalaman warna hingga 16 juta warna 


PNG (*.png), atau "Portable Network Graphics," kualitasnya sangat bagus 
tetapi kekurangannya adalah filenya yang sangat besar. 


Ketika anda selesai memilih image yang akan diimport, klik tombol 
"Select" 


Lokasi Relatif Image 

Ketika anda memasukkan image ke dalam halaman, "Select Image 
Source" akan muncul dan menanyakan link image tersebut. Apa ini berarti 
ketika image disisipkan ke halaman web anda, web akan mencoba mencari 
lokasi hubungan ke halaman web itu sendiri, atau dalam folder yang disebut 
"Site Root." 


Relative To: [Document "| index. html 


Chosen file is nd NN M4, 
Site Root 


Ketika image anda disisipkan ke halaman web, Dreamweaver MX 
otomatis membuat suatu acuan file dalam HTML source code. Untuk 
meyakinkan bahwa acuan adalah benar, image file harus berada didalam situs. 
Jika tidak berada dalam situs, Dreamweaver MX akan bertanya jika anda ingin 
menyalin file ke root folder. 


Perataan dan Wrapping Teks 

Ketika anda mengimport gambar, anda akan bebas untuk memformat 
dan memindahkannya kemana saja. Untuk memindahkan image, gampang 
saja klik dan drag gambar yang diinginkan. 
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Satu yang penting, image akan mengambil ruangan yang cukup besar, atau dengan 
menempatkan teks diatas image. 


Jika anda ingin menjaga image dalam antara baris dan teks, anda bisa melakukannya, 
dan meluruskan image disebelah kiri, tengah atau kanan. Untuk melakukannya, klik 
dan pilih Image. 


Properties palette akan mengubah format dalam image anda. 


= Image, 16K [500 Sre [sigetting_started-02.gif SD Alt H 

| so Unt 90 (Ce) La 
Map [ MN Space [ Target ial Border [ HBH 
rs doy H Space [ Low Sre SD Align [Dera 


Dibawah tombol "Reset Size" disebelah kanan bawah ada tiga tombol. Yang 
pertama untuk meratakan image disebelah kiri, yang kedua untuk menempatkan 
gambar ditengah, dan yang ketiga menempatkan gambar disebelah kanan. 


Ix lk 


Untuk memindahkan teks sekitar image, gunakan "Align" pada menu panah 
bawah. Dua option yang akan anda perlukan adalah "Left" dan "Right." Jika anda 
memilih "Left," image akan berpindah ke kiri sisi kiri dari dokumen. (atau sel tabel), 
dan teks akan diatas, kanan, bawah dari image. Jika anda memilih "Right," image 
akan berada disebelah kanan, dan teks akan berada diatas, kiri, dan bawah image. 


Alt Tags 

Dalam banyak situs, anda akan diingatkan bahwa jika anda menempatkan 
kursor melewati image, jendela dengan teks akan muncul. Ini dikendalikan dengan 
"Alt Tags." Menempatkan Alt Tags adalah desain yang bagus. Jika pengunjung 
berhenti meload halaman sebelum image sepenuhnya terbuka, Alt Tag teks akan 
muncul dalam ruang sebagai pengganti image. Lebih penting lagi, Alt Tags 
digunakan untuk membuat situs anda mudah dikunjungi dengan kekurangan dari 
para pengunjungnya. 


Setelah memilih dalam image, dalam new Properties palette, anda bisa 
memasukkan dalam teks kotak "Alt" pada sebelah kanan. Sekarang, ketika halaman 
anda telah terbuka, jika anda menempatkan kursor pada image, teks akan tampil. 


| Ak A 
e FTF 
| Align [Derat wd 


Borders (Pembatas) 


Image kadang-kadang kelihatan lebih baik jika memakai pembatas 
sekitar mereka. Anda bisa melakukannya dengan mengklik image, dan masuk 
dalam "Border" (sebelah kanan) dalam Properties menu. Ini juga digunakan 
untuk menghitung ukuran dalam pixel. 


Ukuran Images 
bisa juga mengubah ukuran image dalam new Properties window. "W" 
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mewakili untuk lebar dari image, dan "H" untuk mewaklili tinggi dari image 


Angka-angka ini terukur dalam pixel. Anda bisa mengubahnya sesuai dengan 
keinginan anda. 


w [210 


Hari 


COE 
== Image, 4K 
| 


Cara lain untuk mengubah ukuran image adalah dengan mengklik dan 
mendrag segiempat kecil pada sudut image. 


Jika anda membuat kesalahan dengan image, anda bisa mengklik 
tombol "Reset Size" dalam kanan bawah dari image Properties window 
untuk menseting kembali image ke ukuran aslinya. 


Mengubah ukuran image Dreamweaver MX tidak mengubah secara fisik 
properties dari image. Anda tidak benar-benar mengubah ukuran dari image, 
tetapi Dreamweaver MX mengubah ukuran yang akan ditampilkan dalam 
halaman web. Jika anda terbiasa dengan Adobe Photoshop, atau program 
pengedit image, direkomendasikan anda mengeditnya dengan program 
tersebut. 


Links 


Alamat situs dalam internet disebut juga, atau "Uniform Resource Locator." 
Sangat penting, the World Wide Web terdiri dari kumpulan "hyperlinks." link, biasanya 
diketahui, adalah jenis teks khusus yang mengijinkan user website untuk memasuki 
dokumen atau beberapa jenis multimedia file ketika teks ini diklik. Link digunakan 
untuk mengontrol situs, untuk membuat saluran untuk pemakai untuk pergi ke 
website lain, dan untuk membuka files pada website. Dengan semua jenis fungsi 
link, sangatlah penting untuk belajar bagaimana membuat link dalam in Dreamweaver 
MX. 


Link Properties 

Properties palette didesain untuk membuat dan mengedit links. Baca 
daftar nomor dibawah dan gunakan sesuai dengan nomor image untuk 
disisipkan pada tabel: 


| w Properties 


Format [Paragraph | A [Defaut Font x | Size (None =| Id Haa Bjz| Bai 
2| 


Link ES 9 


www weather.com 
www.cnn.com 
www.rutgers.edu 
Www yahoo. com 


1. Link: Disini, anda bisa mengetikkan URL dari situs atau halaman web, 
atau mengcopy paste URL dari web browser. Anda juga bisa membuat 
link dengan pergi ke menu bar dan pilh “Modify” dan lalu “Make Link.” 

2. Link Drop-Down Menu: Klik pada segitiga ini untuk masuk ke menu 
panah bawah yang akan mengijinkan anda untuk memilih URL dari 
daftar URL yang pernah dimasukkan. 

3. Point to File: Untuk menggunakan menu files. Drag dan drop kursor. 
Ke daftar file dalam harddisk atau situs file untuk membuat suatu link. 

4. Browse for File: Klik icon folder, dan brwose file dalam komputer anda 
untuk melink 

5. Target: Links berisi kemampuan untuk membuka halaman dalam lokasi 
yang bervariasi. Gunakan target, anda bisa menset link untuk 
membuka halaman dalam jendela baru, atau browser yang sedang ada 
buka, atau frame yang berbeda (jika anda membuah halaman dalam 
frame) 


Tambahan, anda bisa mengedit properties (atau style) dari links dengan 
pergi ke halaman web Page Properties window. Pada jendela ini, anda bisa 
mengubah warna scheme dari link untuk situs. Anda bisa mengedit warna 
link biasa, warna link pengunjung, dan link aktif. Ide yang bagus untuk 
membuat warna link kontras dari warna background atau image situs anda. 
Untuk contoh, link biru pada halaman web hitam sangat tidak mungkin 
untuk dibaca. Link warna kuning, atau terang, akan lebih baik daripada 
background gelap. Alternatif lain, link gelap pada background terang sangat 
mudah terlihat. 


Membuat Link Ke Situs Lain. 

Membuat link ke website atau halaman web lain yang bukan situs anda 
sangatlah mudah. Pertama, pilih teks yang ingin dilink. Lalu pergilah ke 
Properties palette dan dalam kotak teks link, ketikan didalamnya URL dari situs 
yang ingin dilink. Atau, anda bisa mengcopy URL dari web browser lalu ke menu 
bar dan pilih "Edit," dan lalu "Copy." Lalu, pergilah kembali ke Dreamweaver 
MX, tempatkan kurson dalam teks link dalam Properties palette, dan pergilah 
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ke "Edit," lalu "Paste" dalam menu bar (atau tekan ctrl + v pada keyboard) 
untuk mempaste URL 


| Untitled-1" | 


<body> <p> <a> 
> w Properties 


Eormat Laa -| Afo efault Font z] Size [None | B| z| =| 
Link Ihttp:#www.rutgers.edi -| SD Target -] Ez 


List Item... 


Membuat Link Ke halaman Situs Anda. 

Jika website anda sedang aktif bekerja berisi berbagai halaman, anda 
akan menginginkan untuk link ke halaman lain sedangkan para user sedang 
browser ke situs anda. Betapapun, karena internet pada dasarnya adalah 
kumpulan link halaman web, yang terpenting bahwa anda punya link dan 
berhubungan dengan bagian yang berbeda pada halaman web anda. Ketika 
link ke halaman web didalam situs sendiri, cara yang paling baik adalah 
menyimpan semua halaman web pada satu folder, atau dalam beberapa folder 
yang teratur. Karena jika files website anda teratur, ini akan memudahkan 
untuk link ke halaman web anda. 


Dengan kursor anda, sorot teks yang ingin menjadi link. Pergilah ke 
Properties palette. Selanjutnya ke kotak link, anda akan melihat icon terlihat 
seperti folder. Klik pada icon. Dengan melakukan ini, anda bisa 
membrowse komputer anda untuk menemukan file.html (atau pad dokumen 
lain) yang akan anda rubah menjadi link. 


Select Fie Name From © File system 


C Data Sources 
Look in: | E web, desi z] > © g 


dresmweavermx butorial 


| 
Files of ype [Aa Files (1 =] Cancel | 
United" URL [ite HCV Document: and Seting:/Guert/My D Pasameters... | 
hoap apo ReltveTa Document vi United 
Document should be saved to use thes option, 
Lama Peran 


eC oe) SS 
jendela "Select File" akan membrowse komputer folder anda untuk 
mencari file yang ingin di link. Ketika anda mengklik pada nama file yang 
akan dilink, nama akan muncul dalam kotak teks "File name" dekat bawah 
window. Klik pada tombol "Select" ketika anda menemukan file yang ingin 
dirubah menjadi link 
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Setelah anda mengklik "Select," anda akan melihat nama file muncul dalam 
kotak teks link dalam Properties palette. 


Membuat Link Image 

Sebagai tambahan untuk mengubah teks ke dalam link, image bisa 
juga diubah menjadi link. Images yang dilink bisa diklik seperti membuat 
klik biasa. Membuat image menjadi link tidak berbeda dari membuat teks 
menjadi link. 


Klik pada image yang anda inginkan untuk menjadi link (jika anda tidak 
tahu bagaimana memasukkan images ke halaman web, tolong baca bagian 
images). Pergilah ke Properties palette. Dalam kotak teks link, ketikkan 
dalamnya atau paste URL yang ingin di link. Tekan “Enter” untuk membuat link 
langsung, atau klik dibagian lain dalam Dreamweaver MX. Jika anda mengklik 
kembali pada image, anda akan melihat URL hanya memasukkan tampilan 
pada link kotak teks pada Properties palette. Artinya bahwa anda sekarang 
mengubah image menjadi link. 


HE STATE UNIVERSITY OF NEW JERSEY 


RUTGERS 


¿body> <p> <a> <img> 


“ v Properties 


wen Image, 2K MW [125 Ste |gestcommontrulogo. aif Ey B a m 
Map Y Space Target | - 1 Border |0 = TEF 
rs HO H Space | Low Sre | Gy (D Align | Default -] 


mw rutgers.edu 


Ada beberapa kejadian dimana anda ingin membuat image menjadi link. 
Contoh jika anda ingin mengatur navigasi image yang ditampilkan dalam bagian 
yang berbeda dalam situs anda, klik pada image link akan membawa user ke 
bagian tersebut. Atau, jika anda memiliki versi kecil dari image pada situs anda 
(ini disebut "thumbnail"), anda akan menginginkan bahwa image kecil itu 
menjadi besar ketika user mengkliknya (melakukan ini akan menghemat waktu 
pada saat loading browser). Membuat images menjadi link dilihat secara praktis 
dan estetikanya dalam mendesain web. 


Catatan: Ketika anda membuat image link, untuk menandakan bahwa 
suatu link berubah pada batas image. Untuk menghilangkan batas garis 
pada image link, masukkan “default behavior is to indicate that it's a link by 
turning on the image's b “0” pada kotak teks “Border”. Cara lain, masuklah 
ke nomor berapa saja yang ingin diubah ukuran batas garisnya. 


Link Ke Media Lain 


HTML files tidak hanya bisa link. Dengan image, file suara, atau file film, jenis 
media lain juga memungkinkan bisa link. 


Ada dua cara anda bisa orang lihat tentang sesuatu yang anda link. 
Mereka akan membuka web browser, atau mereka bisa melakukan "download" 
file ke komputer mereka sendiri untuk dibuka dalam program yang berbeda 
(seperti file audio;tidak terlihat dalam web browser, tapi bisa didownload lalu 
dibuka dalam program audio seperti Winamp) 


Berbagai hal seperti image, atau file audio, biasanya dalam wav atau 
mp3 format, bisa dilihat dalam browser. Kebanyakan pengunjung situs anda 
akan melakukannya, tetapi kebanyakan mereka akan menyimpannya dalam 
komputer mereka setelah mereka mendownloadnya, biasanya yang mereka 
download adalah file PDF atau klip-klip video. 


Dengan mengabaikan bagaimana anda menginginkan seseorang untuk 
mendownload atau melihat sesuatu, link ke situs anda. Apapun file yang ingin di 
link, yakinkan bahwa itu dalam direktory yang sama yang halaman anda link 
(pada server dimana situs anda bertempat; akan dipelajari kemudian) 


Pilih teks atau image yang ingin di link ke file lain. Seperti membuat link 
halaman, anda akan memasukan teks ke dalam kotak "Link" pada Properties 
palette. Sebagai ganti, katakan, link ke nama halaman "links.html," anda 
ketikan dalam "murray.jpg," (atau apapun nama file anda) karena anda ingin 
link ke image. 


| Untitled-1" | 


<body> <p> <a> 


~ w Properties 
Format [Paragraph -j A [Default Font X | Size [None r | i= Bi Z| = 


Link 


imagesimurray.jpg 


List Item... 


Disinilah dimana anda memiliki masalah. Setiap orang dan setiap 
komputer memiliki web browser yang dikonfigurasi berbeda. Mungkin anda 
pergi menyeberangi masalah anda. Klik pada link pada satu komputer akan 
membawa pertanyaan apakah anda ingin "Open" atau "Save" file, tapi klik ini 
pada komputer lain akan hanya ke kanan dan membukanya tanpa pertanyaan 
untuk pilihan. Jika anda ingin seseorang untuk mendownload file, mudah saja 
klik pada file itu seperti halaman normal web link,, Anda harus mengetikkan 
teks pesan dalam halaman anda mengingatkan apa yang harus mereka 
lakukan. 


Untuk mendownload file yang dilink, (pada web browser, bukan 
dalam Dreamweaver MX) tempatkan kursor diatas link, dan klik mouse 
kanan, dan pilih "Save As" atau "Save Target As," tergantung dari web 
browser yang anda gunakan. 
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Pn ee ee eRe an au an 


Image of Murray Hall: 
Open 
Open in New Window 


Save Target As... 


Print Target 


put 
Copy Shortcut 


kaste 


Add to Favorites... 


Properties 


kotak "save" akan muncul, menanyakan anda dimana anda akan 
mendownload file. Pilih tujuan, dan klik "Save." File akan mulai didownload. 
Dowloading tergantung dari kecepatan komputer dan kecepatan internet dan 
ukuran file yang didownload, waktunya bisa bervariasi (gambar yang lebih 
kecil akan lebih cepat didownload dibanding dengan video atau music). 


Membuat Anchor 

Katakanlah kamu memiliki satu halaman web, tapi sangat panjang, dan 
anda tidak ingin user menggunakan gulungan untuk menggulung sampai 
halaman yang dicari. Jalan terbaik mengubah panjang halaman web dan 
membuat suatu "anchors" untuk halaman anda. Anchors adalah tipe link yang 
mengijinkan untuk link ke bagian dari halaman yang sama. Membuat anchor, 
bagaimanapun juga, akan perlu mengambil lebih banyak pekerjaan dibanding 
dengan membuat link biasa 


Sebagai contoh, anggap bahwa anda memiliki bagian halaman web 
yang disebut "Outside Resources," tapi bagian ini berimplikasi di akhir 
halaman. Karena anda tidak ingin user untuk menggulung semua sampai ke 
akhir halaman untuk menemukan bagian ini, anda buatlah anchor. 


Pertama sorot teks yang ingin diubah menjadi anchor dengan kursor 
anda. Sekarang, pergilah ke Properties palette. Anda akan menaruh anchor 
link didalam kotak teks link pada Properties palette. Pertama, ketik "#" pada 
kotak teks. Semua anchor link harus memiliki tanda "#" didepan namanya. 
Kode ini menyebabkan web browser melink anchor dan lokasi pada halaman 
yang sama yang anda bekerja. Lalu, ketik pada nama anchor nama yang ingin 
dibuat anchor. Anda bisa membuat ancor nama apa saja yang diinginkan, 
hanya yakinkan bahwa sesuai dengan pekerjaan yang sedang anda lakukan, 
dan pertimbangkan dalam penamaan, dan sebaiknya sesuatu yang mudah anda 
ingat. Yakinkan tidak memasukan simbol dalam nama, tapi bisa menggunakan 
(_) jika ingin ditempatkan ruang antar kata. 
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Click here for mote info 
| Untitled-1* | 


<body> <p> <a> 


Format [Paragraph - | A [Defaut Font - | 
Link [tinto = | 


Sekarang adalah waktu belajar bagaimana untuk melakukan langkah 
berikutnya dalam anchor. Dalam posisi ini, anda sudah membuat anchor link 
yang akan diklik oleh user. Tapi, anda tidak punya sesuatu untuk di link ke 
halaman anda! Dalam hal ini, anda membutuhkan untuk membuat apa yang 
disebut "named anchor." Ini adalah fisik anchor itu sendiri. 


Dalam halaman web anda dalam Dreamweaver MX, taruh kursor anda 
dimana awal bagian anda ingin menempatkan anchor. Lalu, ke menu bar 
dan klik pada "Insert” dan lalu "Named Anchor" (atau, anda dengan 
menggunakan shorcut keyboard, Ctrl + Alt + A). 


amweayer MX - (Untitled Document (Untitle 


Insert Modify Text Commands Site Wind 
Tag... Ctrl+E 
Image Ctrl+Ale-+1 
Image Placeholder 
Interactive Images + 
Media r 


Table Ctrl+Alt-+T 
Table Objects b 
Layer 

Frames r 
Template Objects r 


Form 
Form Objects b 


Email Link 
Hyperlink 


Named Anchor Ctrl+aAlt+4, 
Date 
Horizontal Rule 


Anda juga bisa menyisipkan anchor dengan pergi ke “Insert” panel, pilih 
“Common” tab, dan klik pada “Insert Anchor” icon. 
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= File Edit View Insert M 


| el TE wa 


Kotak dialog akan muncul menanyakan anda untuk menaruh nama 
anchor. Taruh nama yang sama persis yang anda taruh untuk anchor link. Jika 
tidak, anchor tidak akan bekerja. Link dari langkah sebelumnya harus memiliki 
beberapa tempat untuk link juga. Sekarang, anda membuat tempat, dan itu 
harus memiliki nama yang sama seperti link yang telah anda buat. 


Tolong dicatat membuat nama anchor, anda tidak perlu menempatkan 
"#" pada awalnya. Anda hanya perlu melakukan ini untuk membuat 
link ke anchor. 


amed Anchor 


Anchor Name: 


Cancel = 


Hep | Hep | 


Klik tombol "OK" ketika anda selesai memasukkan nama anchor. Ketika 
anda melakukannya, secara fisik anchor akan disisipkan ke dalam halaman web 
anda. Lihat gambar dibawah untuk melihat bagaimana anhor terlihat dalam 
Dreamweaver MX. Tolong catat bahwa ketika halaman dibuka dalam web 
browser, icon ini tidak akan muncl. Hanya muncul sebagai icon dalam 
Dreamweaver MX sehingga anda bisa mengenali dimana anda menyisipkan 
anchor dalam halaman anda. 


EE More Info 


Untitled-1" 


<body> <p> <strong> <a> 
x w Properties 


NamedAnchor Name |into 


se 
<b 


Anda bisa menguji untuk melihat jika anchor telah bekerja dengan 
mempreview dalam halaman web dalam browser (tekan F12 pada keyboard). 
Klik pada anchor link, dan ini harus membawa anda ke bagian yang diberi 
anchor. Jika tidak bekerja, cek untuk meyakinkan nama dari link dan anchor 
cocok dalam Dreamweaver MX. 
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Publishing 


Ketika anda membuat halaman web atau website dalam Dreamweaver MX, 
ini tidak secara otomatis muncul dalam web. Anda perlu mempublish atau 
mengupload file anda ke web. Ketika ini kedengarannya sulit, kebetulan 
Dreamweaver MX datang dengan fitur publishing didalamnya yang mengijinkan anda 
untuk menaruh file anda pada web dengan mudah. Bagaimanapun juga, ada 
beberapa langkah yang anda butuhkan untuk mempelajari publishing. Bagian 
tutorial ini akan membicarakan hubungan untuk menempatkan halaman web anda 
dalam web. 


Mengelola Workspace 

Satu dari kesulitan dalam Dreamweaver MX adalah kebingungan 
mengelola files situs. Ketika pertama kali membuka Dreamweaver MX, 
“Files” panel, Yang akan diuploading ke web site internet, digolongkan pada 
sisi kanan layar. 


wojt tb alo 


eae Sites... xj [Local view “) 


Learning Macromedia 
Dreamweaver HK 


Uaa New 
Reodme 
Tutertats 
Update Panel 


Chok Update to connect to 
Meotemeds.com and get the Isteri 


Seperti yang anda lihat, panel ini hanya menampilkan remote view. 
Karena tujuan kita, kita menginginkan melihat keduanya (remote site dan local 
files). Bagian ini akan diterangkan bagaimana membuat panel “Files” lebih 
dapat dikendalikan. 
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Pertama, gunakan mouse untuk mengklik pada titik kecil setelah kata 
“Files” pada “Files” panel. Tekan tombol mouse, drag keseluruhan panel ke 
tengah layar. Ini akan melepaskan “Files” panel dari sisa panel, dan akan 
mengijinkan panel untuk ada seperti jendela sendiri. 


“kaca! 


Fies ER. Vows Bee 
eo}! ti nio 


CdR Stes.. 


Sekarang, pada baris daftar icon dibawah “Files” panel menu bar, anda 
akan melihat icon pada sebelah kanan disebut “Expand/Collapse.” Klik pada 
tombol ini. Ini akan mengijinkan panel menjadi jendela disebut “Site” dan ini 
mengatur pembagian layar. Pada sebelah kiri dimana files pada Remote Site 


akan terdaftar. Pada sebelah kanan site berisi daftar files yang bekerja dalam 
komputer anda. 
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Naa“ a 


File. Edit, View, Site, 


- Fara | site: [Edit sites... "| oa Q | Tein fa 


B (no site defined) 
Define a Site 
w Desktop 


Ini adalah cara yang paling praktis untuk bekerja dengan files anda. 
Kita sekarang akan menerangkan bagaimana untuk mengambil files online 
dengan mendefinisikan site dan menguploading pekerjaan anda. 


Membuat Situs Baru 


Ketika uploading halaman web anda untuk pertama kali dalam 
Dreamweaver MX, anda akan ditanyakan apa yang disebut "New Site." 
Lukiskan situs anda berarti mengatakan dimana program yang akan anda 
publis pada web, seperti halnya dimana file anda ditempatkan pada komputer 
anda. Anda akan hanya ditanyakan untuk membuat New Site saja, tapi jika 
anda pernah menginginkan untuk membuat tambahan web site, anda akan 
membutuhkan untuk pergi dan menjelaskan fitur pada situs baru. Untuk ke 
menuju ke “New Site”, klik "Site" pada menu bar, dan pilih "New Site." 


Site Window Help 
Site Files Fé 
Site Map Alt+F3 


New Site... 


Edit Sites... 


Jendela yang nampak adalah “Site Definition” . Tampilan default untuk jendela 
ini “Basic.” 


Ada dua mode yang bisa anda gunakan untuk mengedit site: dasar dan 
mahir. Dasar akan membawa anda ke semua seting satu persatu, dan mahir 
akan memberi anda feksibilitas. Bagian tutorial ini akan menjelaskan 
bagaimana mengatur site dalam tampilan “Basic” . Jika anda menginginkan 
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Remote site [Notes| Sizeltyp [Local Files Notes| Size] Type 


5 


mengatur situs anda menggunakan 


“Advanced” mode (tampilan ini akan lebih dikenal baik terutama pengguna 
Dreamweaver 4), lalu lewat bagian ini, dan pindahkan ke “Defining a New Site in 
Advanced Mode.” 


Definisi Situs Baru dalam Mode Dasar 

Dalam jendela “Site Definition”, pastikan anda dalam mode “Basic”. 
Anda bisa katakan anda di tempat yang benar dengan tanpa “Basic” tab pada 
atas jendela. 


Pada layar pertama, masukkan nama untuk situs anda, seperti “My Web 
Site” atau apa saja yang menggambarkan isi dalam situs anda. Lalu, klik 
tombol “Next”. 


Site Definition for Unnamed Site 1 


Layar berikutnya akan menanyakan jika anda ingin menggunakan 
teknologi server. Ini berarti Dreamweaver MX ingin mengetahui teknologi 
database yang ada didalam situs. Karena anda akan lebih menyukai membuat 
situs yang sederhana, klik pada “No” dan lalu klik pada tombol “Next” untuk 
melanjutkan ke langkah berikutnya. 
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Site Definition for My Site Le oa 


Site Definition 


Editing Files, Part 2 


{© No. | do not want to use a server technology. 


| 
| 
Do you want to work with a server technology such as ColdFusion. ASP.NET, ASP, JSP, or PHP? | 
| 
C Yes, | want to use a server technology. | 


ceos |[ Nem] cea | o | 


Sekarang, anda akan ditanyakan bagaimana anda ingin untuk mengedit 
file dalam situs, dan bagaimana anda ingin menguploadnya ke web. Yang 
paling aman adalah pilihan pertama, yang mengijinkan anda untuk mengedit 
situs file anda yang disimpan dalam folder di dalam komputer, dan uploadlah 
kemudian jika situs anda telah siap. 
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Site Definition for My Site K Pen aj 


Site Definition 


Editing Files, Part 3 Test 


How do you want to work with your files during development? 
CG Edit local copies on my machine, then upload to server when ready (recommended) 


C Edt directly on server using local network 
C Edit directly on server using FTP or RDS 


Where on your computer do you want to store your fles? 


Ar z = = 3 ‘ C ‘ 
IC: Documents and Sethings\Guest'\My Documents\My Site’ 


«Back [nm] Cancel | Help | 
| 


Anda sekarang berada di lokasi dalam komputer, folder dimana semua 
file dalam situs ditempatkan. Selanjutnya ke “dimana dalam komputer 
tempat dimana anda menyimpan files?,” Anda akan melihat icon folder kecil. 
Klik pada icon ini untuk membrowse komputer anda untuk menemukan 
folder yang diinginkan. 


Klik ada tombol “Next” ketika anda selesai. 


Bagian selanjutnya adalah sangat penting. Disini, anda akan 
menggambarkan dimana anda akan menguploading situs file secara online, 
dan bagaimana anda mengkoneksikannya. Diasumsikan anda akan 
menguploading situs ke lokasi Eden. Masukkan informasi berikut : 


e Pastikan bahwa "bagaimana mengkoneksi ke remote server" ini diset 
ke FTP 

e Untuk “Apa nama hostname atau alamat FTP of Web server anda?,” 
masukkan dalam "ftp.eden.rutgers.edu". Jika anda menguploading 
files ke web space yang berbeda, isikan informasi yang diperlukan. 

e Untuk “Folder apa dalam server tempat menyimpan files?,” ketik dalam 
"public html" 
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e Untuk “What is your FTP Login:,” ketik dalam Eden account 
user name. Jangan pakai nama sebenarnya-isikan nama user- 
"@eden.rutgers.edu" 

e Tinggalkan kotak kosong password. Anda akan mengisi 
password kemudian. 


Site Definition for My Site 
Basic | advanced | 


Site Definition 


Sharing Files 


How do you connect to your remote server? 
[FTP ] 


What is the hostname or FTP address of your Web server? 


[itp eden rutgers. edu 


What folder on the server do you want to store your files in? 
[pubbe_htrl 

What is your FTP Login: 

[youredennsme 


What is your FTP Password: 


fi l Save 


Test Connection 


<Back |[_ Net) Cancel | Hep | 


5 


Ketika semua informasi yang sesuai dimasukkan dalam jendela, klik 


pada tombol “Next”. 


Layar berikutnya akan menanyakan jika anda ingin untuk mengaktifkan cek 
in/chek out. Klik No untuk sekarang. Kita akan diskusikan apa bedanya 
checking in dan checking out selanjutnya dalam bagian “Collaborating” 


Pilih “No” dan klik pada tombol “Next”. 
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Site Definition for My Site 


Site Definition 


Sharing Files, Part 2 


Do you want to enable checking in and checking out files, to ensure that you and your co-workers 
cannot edit the same file at the same time? 


C Yes, enable check in and check out. 


Layar terakhir memberi suatu ringkasan dari semua spesifikasi untuk 
situs yang telah anda gambarkan. Jika semua kelihatan benar, klik “Done.” 
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Site Definition for My Site | es x| 


Basic | advanced | 


Site Definition pan -—— 


Your site has the following settings: 


Local Info: (Local Root Folder will be created) 
Site Name: My Site 
Local Root Folder C:\Documents and Settings\Guest\My Documents\My Site\ 


FTP Host: fip.eden.rutgers.edu 
Check-in/check-out: Disabled. 


Testing Server: 
Access: IT set this up later. 


Your site can be further configured using the Advanced Tab. 


i | a | 


Ada beberapa kerugian jika menggunakan “Basic” site definition wizard. 
Tampilan “Basic” sebenarnya membuat beberapa langkah lebih 
membingungkan dari pada kelihatannya. Kenyataannya, anda tidak akan 
membutuhkan banyak langkah untuk “Basic” , dan anda akan mengisi 
informasi yang tidak perlu untuk definisi situs. Dalam tampilan “Advanced”, 
semua bagian telah tergambar jelas untuk anda. Direkomendasikan untuk anda 
belajar dalam mode “Advanced” , tapi anda tetap masih bisa menggunakan 
“Basic” jika menginginkannya. Untuk belajar bagaimana menggunakan 
“Advanced” site, tolong lanjutkan membaca bagian selanjutnya. 


Mendefinisikan Situs Baru dalam Advanced Mode 


Dalam jendela “Site Definition”, klik pada “Advanced” tab. Anda akan 
melihat layar berikut : 
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Site Definition for Unnamed Site 1 


Local Info 


C:\Documents and Settings\Guest\My Do C 


File View Columns M 


http: 


Pada sisi kiri jendela, anda akan melihat daerah yang disebut 
"Category." Anda harus berada dalam "Local Info" category. “Local Info” 
adalah langkah dalam Dreamweaver MX dimana letak situs anda bekerja 
dalam komputer. Berikutnya ke "Site Name," ketik nama situs anda, yang bisa 
lakukan apapun didalamnya. Buatlah untuk anda "Local Root Folder" folder 
dalam komputer anda tempat menyimpan semua file web site. Anda bisa 
memilih folder dengan mengklik pada folder icon setelah kotak teks. Biarkan 
sisa informasi kosong, dan ceklist “Enable Cache”. 
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Site Definition for My Website ‘a x| 


Basic Advanced 


Category Local Info 


Ba a Site Name: [My Website 
ki 
oder A Local Root Folder: [C:\mp_site\ D 


Site Map Layout : 
Fae View Ba 7 Refresh Local File List Automatically 


Default Images Folder: | D 
HTTP Address: | http:2/ 


This address enables the Link Checker to 
detect HTTP links that refer to your own 
site. 


Cache: [¥ Enable Cache 


The cache maintains file and asset 
information in the site. This speeds up the 
Asset panel, link management, and Site Map 
features. 


Cancel | Help 


Anda sekarang berada di lokasi dalam komputer, folder dimana semua 
file dalam situs ditempatkan. Selanjutnya ke “dimana dalam komputer 
tempat dimana anda menyimpan files?,” Anda akan melihat icon folder kecil. 
Klik pada icon ini untuk membrowse komputer anda untuk menemukan 
folder yang diinginkan. 


Klik ada tombol “Next” ketika anda selesai. 


Bagian selanjutnya adalah sangat penting. Disini, anda akan 
menggambarkan dimana anda akan menguploading situs file secara online, 
dan bagaimana anda mengkoneksikannya. Diasumsikan anda akan 
menguploading situs ke lokasi Eden. Masukkan informasi berikut : 


e Pastikan bahwa "bagaimana mengkoneksi ke remote server" ini diset 
ke FTP 

e Untuk “Apa nama hostname atau alamat FTP of Web server anda?,” 
masukkan dalam "ftp.eden.rutgers.edu". Jika anda menguploading 
files ke web space yang berbeda, isikan informasi yang diperlukan. 

e Untuk “Folder apa dalam server tempat menyimpan files?,” ketik dalam 
"public html" 
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Untuk “What is your FTP Login:,” ketik dalam Eden account 
user name. Jangan pakai nama sebenarnya-isikan nama user- 


"@eden.rutgers.edu" 
Tinggalkan kotak kosong password. Anda akan mengisi 


password kemudian. 
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Site Definition for My Site 


Basic Advanced 


Category Remote Info 


Testing Server Access: Fe ti 3g 
Sewon DNA FTP Host: (tp.edenrutgersedu 
Pie View ae Host Directory: public html? 
Lagin: Jyoureden_usemame — Test | 
Password: pe O 1“ 


IT” Use Passive FTP 


TF Use Firewall Firewall Settings... | 


IF” Use SSH encrypted secure login 


IF” Automatically upload files to server on save 
Check In/Out J” Enable File Check In and Check Out 


Cancel | Help | 


Biarkan semua seperti terlihat pada gambar diatas. Bagaimana 
dengan "Enable File Check In and Check Out." Untuk kasus kita, dan 
biasanya, anda tidak perlu menyentuh ini. Bagaimanapun, jika anda 
bekerja pada proyek kolaborasi, fitur ini sangat penting, karena ini 
membantu mencegah orang untuk melihat pekerjaan satu sama lain. 


Ketika anda selesai meletakkan semua informasi, klik tombol “OK”. 
Setelah itu, jendela yang disebut “Edit Sites” akan muncul. Anda tidak perlu 
untuk melakukan apapun dalam jendela ini, karena anda baru saja membuat 
situs baru, lalu klik “Done.” 
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Ketika anda melewati layar ini, anda akan dibawa ke jendela utama 
“Site” (dimana anda harus menyusun langkah diatas dari awal bagian ini) klik 
pada icon "Connect" untuk mengkoneksi ke web space anda. Koneksi icon bisa 
ditemukan pada atas jendela site, lalu ke "Site" menu panah bawah. "Connect" 
bisa juga ditemukan dengan mengklik "Site" menu (pilihan ketiga kebawah) 


Filey Edit, View, Site, 


è Site - my site (CAD... Folder 
To see your remote files, click the g| a A 
button on the toolbar, a í] Desktop 


Berikutnya, sebuah jendela akan tampil menanyakan anda untuk 
memasukkan password. Masukkan dala password Eden accout (Jika anda 
uploading file ke situs Eden), tapi jangan klik “Save Password” checkbox. Klik 
pada “OK.” 
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|” Save Password Cancel | 


Anda akan mengetahui jika anda terkoneksi dengan web space anda ketika 
titik abu pada “Connect” icon berubah menjadi hijau. 


AY 


Menguploading File Anda Ke Web. 

Sebelum anda memulai menguploading files ke web space anda, anda pertama 
kali harus belajar icon yang berada dalam jendela “Site” yang akan membantu 
mengatur files anda. 


1. Site: Menu panah kebawah berisi daftar situs yang telah anda buat. 
Situs yang sedang anda kerjakan satu persatu akan muncul. 


2. Connect: Klik pada icon untu mengkoneksi ke server dimana anda 
akan menguploading stus file anda. 


3. Refresh: Klik pada icon ini untuk mengupdate daftar file terbaru 
dalam harddisk (Local) atau remote site. 

4. FTP Log: Catatan yang dilakukan pada saat melakukan aksi dalam 
koneksi FTP. 

5. Get: Klip pada tombol Get untuk mendownload file yang dipilih dari 
remote site ke komputer anda. 

6. Put: Klik pada tombol put untuk mengupload files yang dipilih dari 
komputer anda ke web space. Ini adalah cara bagaimana 
menempatkan situs anda secara online. 

7. Expand/Collapse: Memperluas jendela memberi anda tampilan 
layar dalam membagi daerah situs, berisi Remote Site dan the Local 

files. 


Sekarang anda telah mempelajari bagaimana menaruh files secara online. 
Mempublis situs anda dan menghubungkan files ke account anda, pilih semua 
files yang ingin di upload pada sisi kanan layar dan klik icon "Put". Jika anda 
bertanya "Include Dependent files?," klik "Yes." Tergantung files atau biasanya 
image. 


Anda tahu files anda telah dipublikasikan ke account anda ketika anda melihat 
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files tampil pada sisi kiri monitor. Ini berarti files tersebut telah ditransfer ke 
web space anda. 


Filey Edit, View. Site. 


32) 82) a.) | site: [my site Jacl ts alo 
Remote Site. Notes 
= fe public_htmi/my_site/ E Site - my site (CAD... Folder 


@ about.html @ A about. html 25KB HTML Do... 
oo @) FAOS.html È QFAQs, html 15KB HTML Do... 
» B3 hymie pdf.pdf Ta hymie pdf.pdf 92KB Adobe A... 
@ index.html -@! a index.html 14KB HTML Do... 
j = meguirk.pdf Tj meguirk. pdf 124KB Adobe A... 

Presentation1.ppt mja Presentation1... 36KB Microsoft... 
: room. gif : [a room.gif 5KB GIF Image 
es p) room.psd a room.psd 128KB Adobe P... 


(HA Desktop 


Sekarang, anda mempunyai situs yang bisa anda cari di web. Untuk 
melihatnya dalam browser, hanya ketik tulisan berikut : 


http://www.eden.rutgers.edu/~yourusername/your file title.html 

Anda ketik dalam Eden account user name dan file yang telah anda upload. 
Jika anda telah membeli domain dan hosting anda bisa menyimpannya pada 
domain anda sendiri. 


Mengedit Site 

Ketika waktu anda bekerja dalam Dreamweaver MX, Anda ingin kembali dan 
mengedit web site informasi ke dalam situs yang anda buat. Anda bisa 
melakukan ini dengan pergi ke menu bar dan pilih “Site” dan lalu “Edit Sites. 


ent (Untitled-1)] 


Site Window Help 


m" 


Site Files F8 
Site Map Alt+F8 
New Site... 


Edit Sites... 


layar “Edit Sites” akan muncul. Ini berisi jumlah pilihan yang diijinkan untuk 
memodifikasi properties pada situs yang dipilih. 
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Edit Sites 


New: 
Ini fungisnya sama dengan fitur "New Site". Dari jendela ini, anda bisa 
menggambarkan situs baru. 


Edit: 

Ketika anda membutuhkan mengubah informasi tentang keberadaan situs, klik 
"Edit" dan anda bisa memodifikasi informasi situs dari sini. Untuk contoh, jika 
anda membutuhkan untuk mengubah folder, password, inisial untuk fitur 
“Check In / Check Out”, anda akan membutuhkan untuk mengklik tombol 
“Edit”. Anda akan dibawa ke jendela yang sama ketika pertama kali anda 
menggambarkan situs. 


Duplicate: 
Membuat salinan situs yang ada, menahan semua properties dan setting yang 
telah anda gambarkan. 


Remove: 

Jika ada situs yang tidak ingin ada dalam daftar lagi, klik pada tombol 
"Remove", dan informasi situs tersebut akan terhapus dari Dreamweaver MX 
(meskipun file lokal yang ada dalam komputer anda tetap ada). 


Export: 
Kita simpan ekspor site sebagai file XML 


Import: 
Kita pilih file XML dan diimpor ke site. 


Done: 
Klik tombol "Done" ketika anda selesai bekerja dengan jendela ini. 


Help: 
Lihat help dokumentasi jika anda membutuhkan bantuan dalam mengedit 
situs anda. 


Templates 
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Websites cenderung untuk memiliki lebih dari satu halaman. Karena website 
tidak selalu seperti buku (dengan awal, pertengahan, dan akhir), mereka masih 
memiliki perbedaan tertentu. Seperti yang dinyatakan pada bagian awal, anda akan 
menginginkan semua halaman memliki layout dan navigasi style yang sama. 


Apakah Templates Itu? 

"Template" adalah file yang mengijinkan anda untuk mengedit daerah- 
daerah tertentu pada halaman web yang sudah jadi. Template dalam 
Dreamweaver MX memiliki dua tipe daerah : yang bisa diedit dan yang tidak 
bisa diedit. Seperti namanya, “bisa diedit” daerah adalah satu yang bisa 
diubah, ketik didalamnya, masukkan images, dll. Yang tidak bisa diedit adalah 
satu dimana anda tidak bisa melakukan apapun terhadap daerah tersebut. 


Ketika sedang mengedit template, anda bebas untuk mengedit daerah 
tersebut. Bagaimanapun, ketika anda menggunakan template untuk 
membuat halaman web, anda tidak bisa mengedit sesuatu dalam daerah yang 
tidak bisa diedit. Ini bisa dicega oleh anda atau orang lain dari membuat 
kesalahan didalam daerah yang vital (seperti system navigasi). 


Membuat Template Baru 

Anda bisa membuat template baru dalam beberapa cara. Kebanyakan 
anda mulai dari awal. Buka dokumen baru dalam Dreamweaver MX, dan 
desain layout bagaimana sesuai keinginan anda. Pastikan untuk memasukkan 
navigasi anda, bagian utama dll. Ketika anda memiliki layout yang sesuai 
keinginan anda, klik "File" menu dan pilih “Save as Template.” 


*} Macromedia Dreamweaver MX - [Unt 


3 File Edit View Insert Modify Text 


New... Ctrl+N 
Open... Ctrl-0 
Open in Frame... Geri FShift-FO 
Close Ctrl 
Save Ctrl+S 
Save As... Ctrl+Shift-+5 


Save as Template... 
Save All 


Revert 


Pada kotak yang muncul, pilih situs untuk template anda (ini akan 
menjadi situs anda di web site). Akan seperti template yang tidak ada, seperti 
anda tidak membuat yang baru. Dalam kotak "Save As", beri template nama 
original yang akan selalu anda ingat. Ketika anda selesai klik "Save." 
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Save As Template R | xl 


Site: mp site "| 
— Coc | 


Existing Templates: | (no templates) Cancel 


Save As: (my layout Help | 


Folder baru disebut "Templates" akan dihasilkan untuk anda (ini akan 
ada didalam folder dimana situs file anda disimpan dalam komputer anda). 
Template akan memiliki extension DWT (*.dwt), dan akan diberi nama apa saja 
sesuai keinginan pada kotak akhir (for example, "my. layout.dwt"). 


Daerah yang Tidak Bisa diedit dan yang bisa diedit 

Ketika anda membuat template, anda ingin “menggambarkan” area 
yang bisa diedit dan yang tidak bisa diedit. Untuk contoh, anda akan membuat 
navigasi disebelah kiri halaman, dan body teks pada sisi sebelah kanan 
halaman, dalam tabel. Navigasi untuk situs akan sama tidak masalah dimana 
pada halaman yang akan anda edit, lalu anda tidak ingin membuat ini daerah 
yang bisa diedit. Ini mudah sekali untuk membuat bagian tidak bisa diedit: 
yaitu jangan anda edit ! 


Sekarang, Anda menginginkan membuat bagian situs dimana body 
teks akan menjadi daerah yang diedit, lalu ketika anda siap untuk bekerja 
dalam template, anda akan bisa menyisipkan teks anda kedalamnya. Sorot 
daerah yang ingin didedit. Lalu ke menu bar dan pilih “Insert,” Lalu “Template 
Objects” dan Lalu “Editable Region.” 


hmweaver MX -[<<Template>> (my_layout}] 


Insert Modify Text Commands Site Window Help 
Tag... Ctrl--E Hear 
Image Ctrl--Alt--I 
Image Placeholder 
Interactive Images 
Media 


Table Ctri+Alt+T 

Table Objects 

Layer 

Frames 

Template Objects Editable Region Ctrl+Alt+¥ 
TO Optional Region 


ae Repeating Region 


Form Objects 


Editable Optional Region 
Repeating Table 


Email Link 
Hyperlink 
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Dalam kotak "New Editable Region", beri nama daerah. Untuk contoh, 
jika ini untuk badan teks, anda akan membuat nama menjadi daerah yang bisa 
diedit"body text". Hanya ingat ketika kamu membuat daerah bisa diedit anda 
tidak bisa memberi nama yang sama lebih dari satu. 


New Editable Region 


x! 


Pa 
OK | 
Name: Ibody text 
This region will be editable in documents Cancel | 


based on this template, 
Help | 


Anda akan diberi pesan daerah yang menjadi disorot dengan warna, 
dan ini akan menjadi tab kecil diatas nama itu adalah daerah yang bisa diedit 
dengan nama apa saja terserah anda. 


body test 


Menyimpan Template 


Ketika anda selesai menseting template anda, pastikan untuk 
menyimpan seperti halaman biasa ("File" > "Save"). Dreamweaver MX akan 
menanyakan jika anda ingin mengupdate semua dokumen yang digunakan 
template. Untuk sekarang, jawab "No"; tidak menjadi masalah, karena kita 
belum membuat dokumen dari template 


Macromedia Dreamweaver MX Me: xi 


P You have changed a template. Do you want to 
ba” update all documents in your local site 
that use this template? 


C=] | 


Membuka Halaman Baru dari Template 

Alasan mengapa templates sangat hebat, karena anda bisa membuat 
halaman kosong dengan template yang telah ada dan kita tinggal mengedit 
bagian tertentu. Anda melakukan ini dengan membuat halaman baru dari 
template. 


Pertama, pergilah ke menu bar dan pilih “File” dan lalu “New.” 
“New Document” akan muncul kemudian. Anda seharusnya sudah berada 
dalam “General” tab, tapi ini tentang perubahan. Karena kita akan membuat 


sesuatu yang khusus untuk dokumen baru, tidak hanya halaman kosong, klik 
pada “Templates” tab. 
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New from Template É xj 


General Templates | 


Templates For: Site "my site": Preview: 


Site "bizntech" @ my layout 


Description: 
«No Description? 


IM Update Page when Template Changes 


Help | Preferences... | Get More Content... Cancel | 


Dibawah kolom “Templates For:” pada sisi kiri layar, pilih situs dari yang 
akan menggunakan template. Template dihubungkan dengan masing-masing 
situs terdaftar didalam tengah kolom yang disebut “Site *name': Tampilan kecil 
dari template akan muncul dalam kolom sebelah kanan, “Preview.” Putuskan 
yang template yang mana yang ingin digunakan untuk membuat halaman 
kosong yang baru, dan klik pada tombol “Create”. 


Halaman baru akan muncul, yang satu kelihatan seperti dokumen baru 
biasa. Bagaimanapun, sebagai ganti yang sepenuhnya kosong, layout dari 
template harus muncul depan halaman. Anda memberi keseluruhan halaman 
dengan tipe yang dipilih berwarna (biasanya kuning). Daerah editan juga 
muncul dengan garis batas luar pada sisi luar. Ini menandakan bahwa anda 
bisa mengubah isi. Bagaimanapun, jika tempatkan kursor diatas daerah yang 
tidak bisa diedit, kursor berubah lingkaran dengan garis. Ini menyatakan 
bahwa Dreamweaver MX tidak bisa mengubah yang ada disini, karena ini tidak 
bisa diedit. Akhirnya, anda akan mendapat pesan di sudut kanan atas halaman, 
ada tab kecil yang mengatakan darimana template halaman diperoleh. 

Template: my layout 
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Anda bebas mengubah format halaman sesuai dengan keinginan. 
Satu-satunya batasan adalah anda hanya bisa mengedit sesuatu dalam 
daerah editable region. Jika anda ingin membuat region dalam halaman 
menjadi editable(bisa diedit), anda harrus kembali ke template asli dan edit 
disini. 


Mengubah Template 

Mungkin ada satu titik dimana anda ingin kembali ke template asli, 
dan mengubah sesuatu. Itu bisa perubahan besar atau kecil. Umpamakan 
anda ingin menambahkan pemilihan baru ke menu navigasi anda. Anda 
ingin perubahan ini mencerminkan semua halaman yang dibuat dari 
template. Kembali dan buka template anda. Ini akan berada dalam 
"Templates" folder didalamnya dimana anda menyimpan dokumen 
Dreamweaver MX. 


File name: (mp layout 


Files of ype: TAI Documents htm html: shtm. shtml;*.h ¥ Cancel | 


Buat perubahan ke template anda jika dibutuhkan. 


É 


Sekarang anda siap untuk menerapkan menu baru ini ke semua 
dokumen yang dibuat dari template. Untuk melakukan ini, simpan template 
seperti biasa anda melakukan pada halaman normal. Anda akan ditanyakan 
lagi jika anda ingin menerapkan perubahan ke dokumen anda yang lain. 


Macromedia Dreamweaver MX Bi xÍ 


P You have changed a template. Do you want to 
yy update all documents in your lacal site 
that use this template? 


Eea » | 


Sekarang, pastikan untuk mengklik "Yes.” Ini akan mengupdate 
halaman untuk digunakan template. Kotak "Update Pages" akan akan 
melaporkan kepada anda perubahan pada dokumen. 
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Update: [~ Library Items œs | 
Iv Templates Help | 


V ShowLog (Done 


Status: 


Updating C:\Documents and Settings\Guest\My Documents\bizntech\ 
Done. 

files examined: 1 

files updated: 0 

files which could not be updated: 0 
total time: (0:00:00) 


Sekali anda memperbaharui template, pastikan sinkron dengan remote site 
sehingga anda tidak kehilangan perubahan yang anda buat untuk template 
kemudian. 


Peringatan : Jika anda memiliki halaman yang terbuka, pastikan untuk 
menyimpannya agar perubahan yang dibuat pada template bisa diterapkan 
pada halaman itu. 


Collaborating 


Ada suatu kali dimana anda bekerja dengan yang lain pada proyek besar 
dengan menggunakan Dreamweaver MX. Inilah yang disebut dengan 
"collaborating." Berbeda orang akan bekerja pada bagian yang berbeda dan cara 
yang berbeda walaupun dalam satu proyek bersama dan waktu yang berbeda, 
maka anda memerlukan beberapa cara untuk mengetahui apa yang orang lain 
lakukan. Sungguh beruntung, Dreamweaver MX membuat proses ini menjadi 
sederhana. 


Set Check-in / Check-out Option 

Fitur yang sangat penting bekerja dengan proyek collaboratory 
Dreamweaver MX's adalah "Check-in / Check-out". Ini memasukkan metode 
standar "FTP-ing" file akan bolak balik dari server ke komputer anda. 


Kami asumsikan bahwa anda memiliki tempat untuk menyimpan situs 
anda, dan mengetahui informasi yang diperlukan. Jika anda tidak tahu 
bagaimana untuk menset Dreamweaver MX untuk masuk ke situs anda, 
tolong lihat pada bagian "Publishing" sebelum melanjutkan. 


Pergilah ke menu bar dan pilih “Site” dan lalu “Edit Sites.” Pilih situs 
yang anda inginkan untuk collaborate pada jendela window yang 
ditampilkan. Anda akan dibawa pada jendela “Site Definition”. 


Dari kolom “Category”, pilih “Remote Info.” Sekarang, klik “Enable Check 
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In/Check Out” pada kotak dibawah layar. Lalu ke “Check Out Name,” 
Masukkan nama unik atau inisial. Dibawahnya : 


isi alamat email. Ketika selesai, jendela akan terlihat seperti dibawah : 


Site Definition for my site 


Ketika anda selesai, klik tombol “OK” disini, dan lalu “Done” pada layar 
berikutnya yang muncul. 


Sekarang koneksikan ke server situs anda. 
Synchronize 
Ketika mulai terhubung koneksi dengan server, yang pertama dilakukan adalah 


harus mensinkronkan dengan server. Lakukan langkah berikut, pergilah ke 
menu bar dan pilih "Site" dan lalu "Synchronize." 
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| Site 


New Site... 
Edit Sites... 
Connect Ctrl+Alt+-Shift+F5 
Get Ctrl--Shift--D 

| Checkout Ctrl+Alt+Shift+D 
Put Ctrl-#-Shift#-U 
Check In Ctrl--Alt-#-Shift-U 
Undo Check Out 
Cloaking b 
Reports... 
Check Links Sitewide Ctrl-F8 
Change Link Sitewide... 


Synchronize... 


Didalam the “Synchronize Files” jendela akan muncul, pilih “Entire Site” 
untuk “Synchronize.” Dalam jendela "Direction", Anda akan mendapat dua pilihan 
yang bisa dibuat. Jika anda memulai memasukan files dalam space server untuk 
pertama kali, pilih "Put newer files to remote." Jika seseorang menyimpan files 
didalamnya, anda ingin mengambil file yang sama dalam direktory seperti server, 
pilih "Get newer files from remote." Ini akan memulai downloading dari 
direktory server. 


Perlu dicatat bahwa downloading direktory bisa memakan waktu, 
terutama jika ada files yang besar (atau ada beberapa file yang berukuran 
besar) pada server. Gunakan komputer dengan koneksi cepat akan 
mempercepat proses. 


Synchronize: [Entire my ste'Ste x 
Cancel | 
Help | 


Synchronize Files 


Direction: Get newer files from remote 


|” Delete local files not on remote server 


Check-in / Check-out 
Ketika anda sudah terkoneksi dan tersinkronisasi, anda akan melihat jendela 
yang berbeda. Files akan memiliki kunci "locks" didepannya 


75 of 78 


Local Folder Notes] Size] Type Mod 


= Sy  CAMp Documents\my_eden_space Folder 1/15 
H composer Folder 1/15 
E dvd Folder 1/15 
Eby group Folder 1415 


+- Images Folder 1/15 
P3 2 blah. gif 1KB GIF Image 3/20 


Pa blah. htm 26KB Netscape... 3/20 
Ba index. html 6KB Netscape... 3/20 
Eh A listing ktm KKR Maher sre AON 


Ini berarti mereka di "checked-in"; dengan kata lain, mereka di server, dan 
tidak akan ada seorang pun yang mengerjakan file tersebut. Untuk memulai bekerja 
pada file, klik ganda padanya (ini akan dibuka dalam jendela Dreamweaver MX untuk 
anda untuk dikerjakan). 


Ketika anda bekerja pada file, anda membutuhkan untuk "check" kembali "in" 
ke server. Untuk melakukannya, anda membutuhkan untuk mengklik tombol "Check 
In" pada toolbar. Dibawah, anda akan menemukan image toobar dengan tombol. 


ka C St velo 
ea | [mbdified =| 
Refresh Get 


D — AA P ibe] 


Connect FTP Log Put 


Loc, 


Connect / Disconnect: 
Berhubungan dengan server, atau menghilangkan hubungan dengan server. 


Refresh: 
Jika isi direktory berubah ketik berkoneksi, klik refresh untuk menyegarkan program 
yang ditunjukkan. 


FTP Log: 
Anda akan tidak membutuhkan fitur ini, Ini hanya catatan aksi yang dilakukan. 


Get: 
Download filedari direktory 


Put: 
Upload file ke direktory 


Download & Check Out: 
Download file, dan check it out ke pekerjaan 


Upload & Check In: 

Upload a file ke server, dan check it kembali untuk menandakan anda selesai 

bekerja didalamnya. 
Selalu pastikan untuk check out a file sebelum bekerja didalamnya, dan selalu 
untuk check in file ketika selesai bekerja. Anda akan secara tidak sengaja 
mencegah dari seseorang untuk bekerja dalam file anda jika anda tidak 
melakukan check it kembali. Juga, mencegah menimpah file seseorang, Jika 
mereka men checked out file, mereka membutuhkan untuk check it kembali 
didalamnya. 
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Ketika anda selesai men checked out file, ceklist warna hijau akan muncul 
didepannya. Jika seseorang melakukan checked out file, maka warna akan 
menjadi merah didepannya. Untuk melihat siapa yang men checked out file, 
gulung dalam "Local Folder" anda untuk ke bagian "Checked Out By"; Apapun 
siapapun orang masuk dalamnya akan terdaftar dalam "Check Out Name" 


Local Folder 


Boge CAM Documentsimp eden space 
E composer 
H-E dvd 
Eby group 
i+} images 
& blah. gif 
an. htm 


ex. html 


pmb Lebel 


Collaborating With Templates 

Kombinasi pengetahuan template dan collaboration dalam 
Dreamweaver MX bisa dibuat dengan lingkungan desain web yang kuat. 
Dengan menggunakan collaborating fitur dalam program, anda bisa bekerja 
dengan orang lain dengan menggunakan file yang sama, dalam waktu yang 
sama, bekerja dalam template yang sama. Ini mengijinkan untuk level 
tinggi dan konsisten dan keamanan dalam halaman web anda. 


